如何将 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 * { color: red; }

Answer 2

使用后代选择器^[W3C]：

div.tst  div.cls

>

是 child 选择器 ^[W3C] 并且只会匹配元素的子元素。

Answer 3

就是这样。但是，您的第二个分区 不会 是红色文本，因为它也包含在另一个分区中。

>

选择器只匹配它之前匹配的元素下的直接子元素，所以它只在一个层次上查看

div.tst

内部。尝试从选择器中删除

>

：

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

你更新的 jsFiddle