Safari와 Chrome/Firefox가 다중 레벨 `:not()` 선택기를 처리하는 방식이 다른 이유는 무엇입니까?

크로스 브라우저에서 :not() 선택기 테스트: Safari와 Chrome/Firefox의 Quirks

최근 쿼리에서 한 개발자가 Chrome 및 Firefox와 비교하여 Safari에서 :not() 선택기를 사용할 때 불일치가 발생합니다. 사례를 조사한 결과, 이러한 브라우저가 :not() 내에서 다중 레벨 선택기를 처리하는 방식에 불일치가 있음을 발견했습니다.

Safari의 진화하는 :not() 구현

Safari는 최근에는 복잡한 선택기를 인수로 지원하는 레벨 4 사양인 :not()을 구현했습니다. 이를 통해 특정 부모의 자손이 아닌 요소를 타겟팅하는 등 보다 정교한 선택기 중첩이 가능해집니다.

Chrome/Firefox의 다중 레벨 제한 :not()

반면에 Chrome과 Firefox는 현재 :not() 내에서 단일 수준 선택기만 지원합니다. "p div"와 같은 복잡한 선택기는 이러한 브라우저에서 인식되지 않습니다. 이는 CSS 사양과 브라우저 구현의 차이 때문입니다.

잠재적인 버그 보고서

개발자가 관찰한 다중 레벨의 다양한 렌더링 동작 :not() Safari의 선택기는 잠재적인 버그로 간주될 수 있습니다. 최신 CSS 사양을 따르고 더 복잡한 :not() 인수를 지원하도록 Chrome 및 Firefox를 업데이트해야 할 수도 있습니다.

개발자에게 미치는 영향

웹 애플리케이션이나 스타일시트에 대한 복잡한 :not() 선택기에서는 이러한 브라우저 간 불일치를 인식해야 합니다. 이전 브라우저와의 호환성이 필요한 경우 대체 선택기 패턴을 사용하거나 폴리필을 사용하여 브라우저 전체에서 일관된 렌더링을 보장해야 할 수도 있습니다.

예상되는 변경 사항

상황은 다음과 같습니다. 브라우저가 최신 CSS 사양을 채택함에 따라 발전할 가능성이 높습니다. Chrome과 Firefox는 결국 다중 레벨 지원을 통해 :not()의 모든 기능을 구현할 것으로 예상됩니다. 이를 통해 브라우저 간 호환성이 최우선적으로 구현되고 더욱 표현력 있고 효율적인 CSS 선택기가 가능해집니다.

위 내용은 Safari와 Chrome/Firefox가 다중 레벨 `:not()` 선택기를 처리하는 방식이 다른 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!