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

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

Mary-Kate Olsen

풀어 주다： 2024-12-01 19:44:15

원래의

472명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：내 CSS3 애니메이션이 Safari에서 작동하지 않는 이유는 무엇입니까? 다음 기사：부트스트랩 열 사이에 간격을 자동으로 추가하려면 어떻게 해야 합니까?

본 웹사이트의 성명

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

저자별 최신 기사

에서 2024-04-29 11:01:01

2061

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2222

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47