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

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

1 몇 달 전 By DDD

KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?

3 몇 주 전 By DDD

KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?

3 몇 주 전 By DDD

R.E.P.O.의 모든 적 및 괴물의 강도 수준

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince : 지하실에가는 방법

3 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

자바 튜토리얼

1653

14

Cakephp 튜토리얼

1413

52

라라벨 튜토리얼

1304

25

PHP 튜토리얼

1251

29

C# 튜토리얼

1224

24

더보기