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

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

CSS3에서 :not() 의사 클래스는 다음 방법을 제공합니다. 선택기에서 특정 요소를 제외합니다. 그러나 먼 후손을 다룰 때 그 동작은 혼란스러울 수 있습니다.

현재 구현

공식 문서 및 브라우저 지원 분석에 따르면 :not() 선택자만 대상 요소의 직계 자녀 또는 손자에게 적용됩니다.

이 점을 고려하세요. 예:

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

이 규칙은

그러나 :not() 선택기는 손자 이상으로 확장되지 않습니다.

문제

이 예에서 의 직계 하위 또는 손자가 아닙니다:

<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

이 경우

요소는

의 자손이므로 *:not(p) 조건과 일치하는 반면

그 안에 있는 요소는 빨간색을 상속합니다.

해결책

올바른 동작은

요소를 기본 색상으로 유지합니다. 이를 달성하려면 규칙은 모든

요소 직접:

div p { color: black; }

CSS 선택기 레벨 4의 향후 개선 사항

CSS 선택기 레벨 4 제안은 :not() 선택기를 향상하여 다음과 같은 전체 복잡한 선택기를 허용합니다. 결합자. 이는 다음과 같은 선택기를 작성할 수 있음을 의미합니다.

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

이 확장된 구문을 사용하면 먼 하위 항목을 보다 정확하게 타겟팅할 수 있습니다.

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

css css3 for while class default this

성명：

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

이전 기사：CSS 변수만 사용하여 CSS 색상 음영을 생성하려면 어떻게 해야 합니까?다음 기사：CSS 변수만 사용하여 CSS 색상 음영을 생성하려면 어떻게 해야 합니까?

관련 기사

더보기

• CSS 작성 시 Border에 대해 주의해야 할 사항 요약
• 다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환
• Marquee의 상세한 사용 분석
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别