如何将 css 规则应用于元素的所有后代

Question

如果一个类在另一个特定的类中，你如何重新定义它？

div.cls {
color:blue;
}

div.tst > div.cls {
color:red;
}

<div class="cls">test</div> // text color = blue

<div class="tst">
  <div class="cls">test</div> // text color = red
  <div>
    <div class="cls">test</div> // text color = blue
  </div>
<div>

如何让最后一个也变红？

jsfiddle

http://jsfiddle.net/gpD7H/

Answer 1

我用过这个，它对我有用：

.name-of-parent * { 颜色：红色； }

Answer 2

使用descendant selector ^[W3C]：div.tst div.cls

> 是 child selector ^[W3C]，只会匹配元素的子元素。

Answer 3

就是这样。但是，您的第二个分区不会是红色文本，因为它也包含在另一个分区中。 > 选择器只匹配在它之前匹配的元素下的直接子元素，因此它只在一层内查看div.tst。尝试从选择器中删除 >：

div.tst div.cls {
color:red;
}

Your updated jsFiddle