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

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

Susan Sarandon

풀어 주다： 2024-12-14 18:57:23

원래의

343명이 탐색했습니다.

Does CSS `:not()` Selectively Target Only Immediate Children and Grandchildren?

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