CSS에서 모든 하위 요소를 재귀적으로 선택

CSS에서 모든 하위 요소를 재귀적으로 선택

모든 하위 요소를 재귀적으로 선택하는 방법은 무엇입니까?

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

이 클래스는 정의된 className 및 모든 직접 자식에 대한 클래스만 슬로우합니다.간단한 방법으로 모든 childNode를 다음과 같이 선택할 수 있습니다.

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

공백을 사용하여 요소의 모든 하위 항목을 일치시킵니다.

div.dropdown * {
    color: red;
}

x yX 내부의 모든 요소(자녀, 손자 등)와 일치합니다. 아무리 깊이 내포되어 있더라도 마찬가지입니다.

별표*모든 요소와 일치합니다.

공식 규격: CSS 2.1: 5.5장: 하위 선택기

규칙은 다음과 같습니다.

A B {
  /* B is descendant of A */
}

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

그렇게

div.dropdown *

대신에

div.dropdown > * 

하위 결합자

일반적으로 단일 공백("") 문자로 표시되는 하위 조합은 두 개의 선택기를 결합하여 첫 번째 선택기와 일치하는 상위 요소(상위, 상위 부모, 상위 부모 등)가 있는 경우 두 번째 선택기에 의해 일치하는 요소가 선택되도록 합니다.

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>

언급URL : https://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css