범용 선택기(*)가 :before 및 :after와 같은 의사 요소에 영향을 줍니까?

범용 선택자(*)와 의사 요소(:before, :after)

범용 선택자(*)가 영향력을 확장합니까? :before 및 :after?와 같은 의사 요소에 예를 들어 다음을 사용할 때:

* { box-sizing: border-box; }

가상 요소에 자동으로 영향을 미칠까요, 아니면 명시적으로 선언해야 할까요?

*, *:before, *:after { box-sizing: border-box; }

직관과는 달리 범용 선택기는 직접 영향을 미치지 않습니다. 의사 요소(간접 상속 제외). :before와 :after는 실제 요소와 별개의 개체이고 추상화로 표현되기 때문입니다.

*와 같은 단순 선택자는 의사 요소가 아닌 실제 요소만 대상으로 지정할 수 있습니다. :before 및 :after의 스타일을 지정하려면 선택기에 명시적으로 포함해야 합니다.

*만 사용해도 문제가 발생하지 않은 이유는 의사 요소가 기본적으로 인라인 표시로 설정되어 영향을 받지 않기 때문일 수 있습니다.

명확성을 위해 *를 포함한 여러 단순 선택기를 사용할 때 *는 선택 사항이라는 점을 기억하세요. 또한 현재 선택기 사양에서는 의사 요소를 나타내기 위해 이중 콜론을 사용하지만 이전 브라우저는 상자 크기 재설정에 대해 단일 콜론 표기법을 지원합니다.

:before, :after는 스타일을 다음에 적용합니다. 모든 요소의 의사 요소는 콘텐츠 속성을 선언할 때까지 생성되지 않습니다. 이는 성능 문제를 일으키지 않습니다.

위 내용은 범용 선택기(*)가 :before 및 :after와 같은 의사 요소에 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!