Safari, Chrome 및 Firefox가 CSS `:not()` 선택기를 사용하여 다른 결과를 표시하는 이유는 무엇입니까?

:not() Safari, Chrome 및 Firefox의 선택기 불일치

:not() 선택기는 다음과 같은 요소를 선택하는 데 사용됩니다. 지정된 선택기 세트와 일치하지 않습니다. 그러나 다음 코드에서 볼 수 있듯이 이 선택기가 브라우저 간에 작동하는 방식에는 불일치가 있을 수 있습니다.

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

Safari에서 위 코드는 'FOO' 텍스트를 파란색으로 렌더링합니다. Chrome 및 Firefox에서는 빨간색으로 렌더링됩니다. 이 동작은 :not()의 레벨 4 버전을 구현하는 Safari의 최근 업데이트로 인해 발생합니다. 이를 통해 더 복잡한 선택기를 처리할 수 있습니다.

현재 :not() 구현에서는 단일 단순 선택자는 인수로 지원됩니다. 'p div'와 같은 복잡한 선택기는 현재 설계상 지원되지 않습니다. 따라서 Chrome 및 Firefox에서는 :not(p div) 규칙이 적용되지 않으며 'FOO' 텍스트는 첫 번째 규칙에 따라 빨간색을 상속합니다.

그러나 Safari는 보다 고급된 규칙을 구현했습니다. 레벨 4 사양, :not() 인수에 대한 복잡한 선택기를 허용합니다. 따라서 :not(p div) 규칙은 'FOO' 요소와 일치하여 파란색이 됩니다.

이러한 불일치는 크로스 브라우저 호환 웹사이트를 개발할 때 잠재적인 과제와 고려 사항을 강조합니다. 최신 버전의 브라우저에는 업데이트된 CSS 사양이 도입되므로 브라우저 호환성과 잠재적인 구현 차이점을 추적해야 합니다.

위 내용은 Safari, Chrome 및 Firefox가 CSS `:not()` 선택기를 사용하여 다른 결과를 표시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!