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

Posted 2023-03-06

【中文标题】在CSS中递归选择所有子元素

【英文标题】：Select all child elements recursively in CSS

【发布时间】：2011-06-22 01:23:21

【问题描述】：

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

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

该类仅在定义的 className 和所有直接子级上抛出一个类。你怎么能，以一种简单的方式，像这样选择所有的 childNode：

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

【参考方案1】：

使用空白来匹配一个元素的所有后代：

div.dropdown * 
    color: red;

x y 匹配 x 内部的每个元素 y，不管它嵌套的有多深——子、孙等等。

星号* 匹配任何元素。

官方规范：CSS 2.1: Chapter 5.5: Descendant Selectors

【讨论】：

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

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

我知道，它有点难看。相反，您可以尝试编写更精确的选择器，很有可能，这也可以。 （例如#head ul → #head ul#navi）

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

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

【参考方案2】：

规则如下：

A B 
  /* B is descendant of A */

A > B 
  /* B is direct child of A */

所以

div.dropdown *

而不是

div.dropdown > *