Chrome 및 Firefox와 비교하여 Safari에서 ':not()' 선택기가 다르게 동작하는 이유는 무엇입니까?

:not() 선택기 불일치: Safari와 Chrome/Firefox

:not() CSS 선택기는 선택기에서 특정 요소를 제외하는 데 사용됩니다. 선택 사항은 Chrome 및 Firefox와 비교하여 Safari에서 다르게 동작하는 것으로 나타났습니다. 이러한 불일치는 개발자들에게 혼란을 야기했으며 근본 원인에 대한 조사를 촉발했습니다.

최근 관찰에 따르면 Safari는 이제 인수에서 복잡한 선택기를 허용하는 레벨 4 사양인 :not()을 완전히 지원합니다. 이 기능을 사용하면 jQuery 구현과 일치하게 됩니다. 그러나 Chrome과 Firefox는 현재 :not()에 대한 인수로 단순 선택기만 지원합니다.

:not() 선택기 예외는 괄호 안에 복잡한 선택기를 사용하는 데서 발생합니다. 복합 선택자는 하위 항목, 인접 형제, 일반 형제 등 연결자로 연결된 여러 단순 선택자로 구성됩니다. 제공된 코드 조각에서 선택기 p div는 두 개의 단순 선택기(p 및 div)를 하위 연결기와 결합하므로 복잡한 선택기를 나타냅니다.

Chrome과 Firefox는 :not(에 대한 복잡한 선택기를 지원하지 않기 때문입니다. ) 인수를 사용하면 제공된 코드의 p div 부분이 인식되지 않습니다. 결과적으로 :not() 선택기는 사실상 무시되고 대체 규칙 em:not(...)이 적용됩니다. 모든 요소의 색상으로 빨간색을 지정하는 이 대체 규칙은 Chrome 및 Firefox에서 관찰되는 빨간색 텍스트를 담당합니다.

반대로, Safari는 :not()에서 복잡한 선택기를 지원합니다. ,

내의 요소를 올바르게 제외합니다. 빨간색 사양의 요소입니다. 이로 인해 Safari에 파란색 텍스트가 표시됩니다.

현재 Chrome과 Firefox가 :not()에 대한 복잡한 선택기를 지원할 시기는 아직 불확실합니다. 그러나 Safari에서 레벨 4 사양을 구현한 것은 이를 최신 웹 표준에 맞추고 CSS 선택기에 향상된 기능을 제공하는 중요한 발전입니다.

위 내용은 Chrome 및 Firefox와 비교하여 Safari에서 ':not()' 선택기가 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!