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

toe95027  于 2023-02-01  发布在  其他
关注(0)|答案(3)|浏览(189)

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

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

这个类只在定义的className和所有直接子节点上抛出一个类,你如何用一种简单的方法,像这样挑选所有的childNode:

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

t3irkdon1#

使用 * 白色**匹配元素的所有后代:

div.dropdown * {
    color: red;
}

x y匹配 x 中的每个元素 y,无论嵌套得有多深--子元素、孙元素等等。
星号*匹配任何元素。
官方质量标准:CSS 2.1:第5.5章:后代选择器

zxlwwiss

zxlwwiss2#

规则如下:

A B {
  /* B is descendant of A */
}
A > B {
  /* B is direct child of A */
}

所以

div.dropdown *

代替

div.dropdown > *
bkhjykvo

bkhjykvo3#

Descendant combinator
后代组合符--通常用一个空格("")字符表示--组合两个选择符,这样,如果第二个选择符匹配的元素有一个祖先(父元素、父元素的父元素、父元素的父元素等)元素匹配第一个选择符,则第二个选择符匹配的元素会被选中。

details details {
  margin-left:48px;
}
<details>
  <summary>A</summary>
  A is a letter in the alphabet.
</details>
<details open>
  <summary>B</summary>
  B is a letter in the alphabet.
  <details open>
    <summary>1</summary>
    1 is a number.
    <details open>
      <summary>*</summary>
      * is a character.
    </details>
  </details>
  <details open>
    <summary>2</summary>
    2 is a number.
  </details>
</details>

相关问题