CSS에서 재귀 적으로 모든 자식 요소를 선택하십시오

407

모든 자식 요소를 재귀 적으로 어떻게 선택할 수 있습니까?

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

이 클래스는 정의 된 className 및 모든 직계 자식에서만 클래스를 발생시킵니다. 간단한 방법으로 다음과 같이 모든 자식 노드를 선택하는 방법은 무엇입니까?

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

css css-selectors

— 클라크
소스

답변:

621

요소의 모든 자손과 일치 시키려면 공백 을 사용하십시오 .

div.dropdown * {
    color: red;
}

x yx 안에있는 모든 요소 y 와 일치 하지만 깊게 중첩되어 있으면 어린이, 손자 등이 될 수 있습니다.

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

— 안로 에스티
소스

작동하지만 우선 순위가 더 높은 다른 모든 클래스를 재정의합니다. (CSS 파일에 나중에

— 배치됨

또한 선택기는 파일의 위치뿐만 아니라 속성의 우선 순위에 영향을줍니다. 값에`! important`를 추가해 볼 수 있습니다. 예 :color: red !important;

— anroesti

알아, 조금 못 생겼어 대신 더 정확한 선택자를 작성해 볼 수도 있습니다. (예 : #head ul→ #head ul#navi)

— anroesti

자, 매우 기본적인 예 p.xy는 좀 p더 구체적이기 때문에 보다 중요 합니다. jsfiddle.net/ftJVX

— anroesti

특정 수업이있는 모든 어린이를 원하면 어떻게합니까?

— MEM

144

규칙은 다음과 같습니다.

A B

A의 후손 인 B

A > B

A의 자녀로서 B

그래서

div.dropdown *

그리고 아닙니다

div.dropdown > *

— 복근 투미
소스