在CSS中递归选择所有子元素

407

如何递归选择所有子元素？

div.dropdown, div.dropdown > * {
    color: red;
}

此类仅在定义的className和所有直接子级上抛出一个类。您如何以一种简单的方式选择所有子节点，如下所示：

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

css css-selectors

— 克拉克
source

Answers:

621

使用空格匹配元素的所有后代：

div.dropdown * {
    color: red;
}

x y匹配x内的每个元素y，无论嵌套多么深-子代，孙代等等。

星号*匹配任何元素。

— Anroesti
source

它可以工作，但是现在即使它们具有更高的优先级，它也会覆盖所有其他类。.（它们稍后放在css文件中）

— clarkk 2011年

选择器还决定属性的优先级，而不只是属性在文件中的位置。您可以尝试将`！important`添加到您的值中，例如color: red !important;

— anroesti 2011年

我知道，这有点丑陋。您可以尝试编写更精确的选择器，这也可能会起作用。（例如#head ul→ #head ul#navi）

— anroesti 2011年

好的，非常基本的示例：p.xy比更为重要p，因为它更具体。jsfiddle.net/ftJVX

— anroesti 2011年

如果我要让所有上特定班级的孩子怎么办？

— MEM 2014年

144

规则如下：

A B

B作为A的后代

A > B

B作为A的孩子

所以

div.dropdown *

并不是

div.dropdown > *

— 阿布登诺·图米（Abdennour TOUMI）
source