指定css是否被类包围

Question

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

假设我有一个班级.foo

 .foo{ color:red;}

我还有另一个班级.bar

.bar{ color:green;}

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

示例：在这里，我希望“等等”成为蓝色

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

我该怎么办？没有使用LESS或类似的东西。

Answer 1

像这样写：

.bar .foo{
color:blue
}

＆安培;更具体的写作如下：

.bar > .foo{
    color:blue
    }

选中此http://jsfiddle.net/DEmk7/1/

Answer 2

根据这个例子：

<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;}

Answer 3

您可以按空格分隔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>

使用“＆gt;”子选择器将允许您仅定位直接子项，这意味着与yay的子项不匹配。