如何将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/

- clarkk

---

你的代码应该可以正常工作。你在问什么？ - SLaks

你的问题是什么？有没有什么东西的颜色不符合你的预期？ - Ernesto

如果cls类不是直接从tst继承的子类，该怎么办？ - clarkk

就像在答案中所说的那样，只需从“child”（>）选择器更改为后代选择器（不需要任何内容）。 - Ernesto

Answer 1

我用过这个，对我很有效：

.name-of-parent * { color: red; }

- TomoMiha

---

完美运行，节省了大量时间。 - Ben Gubler

Answer 2

使用后代选择器[W3C]： div.tst div.cls >是子代选择器[W3C]，只匹配一个元素的直接子元素。

- Felix Kling

Answer 3

完全就是这样。但是你的第二个区块不会显示为红色文本，因为它还包含在另一个区块中。 >选择器仅匹配与其之前匹配的元素的直接子元素，因此它只在 div.tst 内查找一级内容。尝试将选择器中的 > 删除：

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

Your updated jsFiddle

- animuson