如果被一个类包围，则指定 css答案

【问题标题】：specifying css if surrounded by a class如果被一个类包围，则指定 css
【发布时间】：2012-07-05 18:27:41
【问题描述】：

我试图在我的 rails 应用程序中执行以下操作：

假设我有一个类 .foo

 .foo{ color:red;}

我还有另一个类.bar

.bar{ color:green;}

我希望将 foo 元素的颜色更改为蓝色，仅当被 bar 类包围时

示例：这里我希望“blah blah”是蓝色的

<div class = "bar" >
  <div class = "foo" >
  blah blah
  </div>
</div>

我该怎么做？不使用 LESS 或类似的东西。

【问题讨论】：

【解决方案1】：

这样写：

.bar .foo{
color:blue
}

& 更具体的写法如下：

.bar > .foo{
    color:blue
    }

【讨论】：

【解决方案2】：

您可以用空格分隔 css 选择器以指定嵌套。例如

.bar .foo
{
    color:blue;
}

值得注意的是，在这种格式下，它将同时匹配：

<div class = "bar" >
  <div class = "foo" >
  blah blah
  </div>
</div>

和

<div class = "bar" >
  <div class = "yay" >
    <div class="foo">
      blah blah
    </div>
  </div>
</div>

使用 ">" 子选择器将允许您仅定位直接子级，这意味着不会匹配带有 yay 的子级。

【讨论】：

【解决方案3】：

根据这个例子：

<div class = "bar" >
  <div class = "foo" >
  blah blah
  </div>
</div>

你也可以给你的 div 类 foo 另一个类。

<div class = "bar" >
  <div class = "foo blue" >
  blah blah
  </div>
</div>

在你的 css 中你写以下内容：

.foo{ color:red;}
.bar{ color:green;}
.blue{color:blue !important;}

【讨论】：