Ruby on rails 如果被类包围，则指定css

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

假设我有一节课

 .foo{ color:red;}

我还有一节课。酒吧

.bar{ color:green;}

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

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

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

废话

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

这样写：

.bar .foo{
color:blue
}

.bar > .foo{
    color:blue
    }

&要了解更多具体信息，请这样写：

.bar .foo{
color:blue
}

.bar > .foo{
    color:blue
    }

---

选中此复选框，您可以用空格分隔css选择器以指定嵌套。 e、 g

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

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

废话

及

废话

---

使用“>”子选择器将允许您仅针对直接子项，这意味着带有yay的子项将不匹配。

根据本例：

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

---

也许值得一提的是

组合符，因为“包围”有点暗示它可能只用于直系子女。！重要的是，通常应该避免使用自然css级联，这是一篇有用的文章：我认为使用它不是一个问题。它很好用，所以对我来说没有问题。谢谢你在读了那篇文章后在@liquidcreal Alex上留下我的评论。我很快就被说服了，所以我正在努力传播这个消息。我只是在我的网站上寻找一个小问题。经过一个小时的思考和寻找正确答案，我终于用！重要；：对不起，我只是想提一下。

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

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