ruby-on-rails - 如果被一个类包围，则指定 css

Question

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

假设我有一堂课 .foo

 .foo{ color:red;}

我还有另一堂课.bar

.bar{ color:green;}

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

示例：在这里我希望“blah blah”为蓝色

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

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