CSS `:not()`은 직계 자식이나 먼 자손만 선택적으로 대상으로 삼나요?-CSS 튜토리얼-php.cn

CSS :not() 선택기가 먼 하위 항목까지 확장됩니까?

집

웹 프론트엔드

CSS 튜토리얼

CSS `:not()`은 직계 자식이나 먼 자손만 선택적으로 대상으로 삼나요?

Mary-Kate Olsen

Dec 01, 2024 pm 07:44 PM

Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?

CSS :not() 선택기가 먼 하위 항목까지 확장됩니까?

CSS3 :not() 의사 클래스는 선택기에서 부정을 허용합니다. 지정된 패턴. 그러나 기능에는 제한이 있습니다.

현재 구현

CSS3 및 CSS 선택기 레벨 4 문서에 설명된 대로 :not()은 현재 직계 자손에만 일치합니다. . 제공된 예에서:

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

로그인 후 복사

이 선택기는

가 아닙니다.

내에 중첩되어 있으면 영향을 받지 않습니다.

상속 및 스타일링

스타일 속성의 상속으로 인해 :not()의 동작이 더욱 복잡해질 수 있습니다. 질문의 예에서

그 자체는 :not() 선택기와 일치합니다. 이는 지정된 기준을 충족하는 상위 요소
에 부정이 적용되기 때문입니다.

향후 개선 사항

CSS 선택기 레벨 4에서는 다음 확장을 제안합니다. not()은 전체 복합 선택기와 결합자를 포함합니다. 이렇게 하면 보다 세부적인 필터링이 가능해 다음과 같은 선택기를 사용할 수 있습니다.
p:not(div p) {
  color: red;
}
로그인 후 복사
권장사항

현재 :not()의 제한 및 상속과의 잠재적인 혼동으로 인해 , 일반적으로 먼 하위 항목을 필터링하는 데 사용하지 않는 것이 좋습니다. 직접 선택기를 사용하거나 제외하려는 요소에 특정 스타일을 적용하는 등의 대체 접근 방식을 고려하세요. :not()의 복잡한 선택기에 대한 지원이 구현되면 이 기능이 더욱 유용해질 수 있습니다.
위 내용은 CSS `:not()`은 직계 자식이나 먼 자손만 선택적으로 대상으로 삼나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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