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

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