CSS :not()은 먼 하위 요소를 선택적으로 대상으로 삼나요?

CSS :not() 선택기가 먼 하위 항목을 대상으로 할 수 있습니까?

CSS3 :not() 의사 클래스는 요소를 제외하기 위한 것입니다. 지정된 선택기와 일치합니다. 먼 후손을 타겟팅하는 데는 제한적으로 지원됩니다.

구현 및 지원

:not() 선택기는 최신 브라우저에서 부분적으로 구현되지만 먼 후손을 타겟팅하는 것은 지원합니다. 제한되어 있습니다. 주로 요소의 직계 하위 항목에서 작동합니다.

먼 하위 항목에 대한 동작

귀하의 예에서 :not(p) 선택기는

내부의 요소는

의 하위 항목이더라도 마찬가지입니다. :not()은 직계 자식 선택자만 무효화하기 때문입니다.

요소는 :not(p) 기준과 일치하며 색상은 빨간색으로 설정됩니다. 이어서

요소는 상위

에서 이 색상을 상속합니다.

예상 동작과 실제 동작

요소는 :not() 선택기의 영향을 받지 않지만 색상 변경은 상속됩니다. 이는 먼 후손을 대상으로 의도된 동작이 아닙니다.

해결 방법

특정 스타일만

div p {
    color: black;
}

CSS 선택기 레벨 4의 향상된 기능

CSS 선택기 레벨 4에서는 다음 확장을 제안합니다. not()은 결합자가 있는 복잡한 선택자를 허용합니다. 이를 통해 더 큰 유연성을 갖고 먼 후손을 타겟팅할 수 있습니다. 일단 구현되면 다음과 같은 선택기를 작성할 수 있습니다.

p:not(div p) {
    color: red;
}

이 선택기는 모든

의 직계 자손이 아닌 요소.

위 내용은 CSS :not()은 먼 하위 요소를 선택적으로 대상으로 삼나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!