CSS :not()은 먼 하위 항목을 선택적으로 제외합니까?

Distance Descendants 및 CSS :not() 선택기

CSS3 :not() 의사 클래스는 특정 선택기를 무효화하도록 설계되었습니다. 성냥. 이는 여러 브라우저에서 널리 구현되었습니다. 그러나 이 선택기와 관련된 일반적인 오해 중 하나는 먼 하위 항목에 적용할 수 있다는 것입니다.

:not()는 직계 하위 요소에 대한 일치를 성공적으로 부정하지만 더 먼 하위 항목에 대해서는 예상대로 작동하지 않습니다. 제공된 예에 표시된 대로:

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

이 스니펫에서

요소는

의 직계 자손이 아니더라도 여전히 상위

로부터 빨간색을 상속받습니다. 이는 :not()이 해당 요소의 하위 항목이 아닌 해당 요소에 대한 일치를 직접 무효화하기 때문에 발생합니다.

CSS3 및 CSS 선택기 레벨 4의 :not()에 대한 문서에서는 이 동작을 명시적으로 다루지 않습니다. 그러나 이러한 동작은 의도적인 것으로 확인되었으며, 선택자는 손주 매칭을 지원하기 위한 것이 아닙니다.

해결책

원하는 결과를 얻으려면 :not() 일치에서 먼 후손을 제외하려면 다른 방법을 사용해야 합니다. 일반적인 접근 방식 중 하나는 제외하려는 특정 요소에 색상을 지정하고 상속된 값을 덮어쓰는 것입니다.

div {
  color: red;
}

div p {
  color: black;
}

CSS 선택기 레벨 4 향상

CSS 선택기 레벨 4에서는 :not() 선택기에 대한 개선을 제안하여 그 안에서 더 복잡한 선택기를 사용할 수 있습니다. 이 변경으로 인해 다음 구문을 사용하여 하위 항목을 올바르게 부정할 수 있습니다.

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

이 개선 사항은 아직 브라우저에서 널리 구현되지 않았지만 :not()을 사용하여 먼 하위 항목을 일치시키고 부정하는 유망한 솔루션을 제공합니다.

위 내용은 CSS :not()은 먼 하위 항목을 선택적으로 제외합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.