범용 선택기와 의사 요소

범용 선택기(*)는 문서의 모든 요소를 ​​대상으로 합니다. 그러나 :before 및 :after와 같은 의사 요소에는 직접 영향을 미치지 않습니다.

의사 요소는 가상 노드를 나타내는 DOM의 추상화입니다. 실제 요소가 아니므로 *와 같은 간단한 선택기로 대상을 지정할 수 없습니다.

의사 요소에 스타일을 적용하려면 , 와 같이 선택기에 명시적으로 포함해야 합니다. before, *:after.

이는 * { box-sizing: border-box; }는 :before 및 :after와 같은 의사 요소에 자동으로 영향을 미치지 않습니다.

대신 :before, :after { box-sizing: border-box; } 해당 의사 요소에 상자 크기 조정 속성을 적용합니다.

일부 개발자는 * { box-sizing: border-box; } 의사 요소는 일반적으로 인라인으로 표시되므로 문제가 발생하지 않습니다. 상자 크기 조정은 인라인 요소에 영향을 주지 않으므로 범용 선택기만 사용하면 의사 요소에 눈에 띄게 영향을 미치지 않습니다.

:before, :after는 의사 요소에 영향을 미친다는 점에 유의하는 것이 중요합니다. html, head 및 body를 포함한 모든 요소 중 해당 의사 요소는 콘텐츠 속성을 적용할 때까지 생성되지 않습니다. 이 동작과 관련된 성능 문제는 없습니다.