CSS `:not()` 선택기가 Safari, Chrome, Firefox에서 다르게 동작하는 이유는 무엇입니까?

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

브라우저에서는 종종 다양한 기능을 갖춘 기능을 구현하므로 렌더링 불일치가 발생합니다. CSS :not() 선택기는 Safari, Chrome 및 Firefox에서 서로 다른 동작을 나타내는 사례 중 하나입니다.

문제:

:not() 인수에 여러 수준을 지정할 때 선택기가 예상대로 작동하지 않습니다. 이 예에서:

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

Safari는 텍스트를 파란색으로 렌더링하는 반면 Chrome과 Firefox는 빨간색을 사용합니다.

원인:

근본 원인 복잡한 선택기를 인수로 허용하는 레벨 4 :not() 선택기의 Safari의 최근 구현입니다. 반면 Chrome과 Firefox는 현재 버전의 :not()에서 단일 수준 인수만 지원합니다.

설명:

복잡한 선택기에는 여러 개의 인수가 포함됩니다. 조합자(예: 하위 항목, 형제 항목)로 구분된 복합 선택자입니다. 이 경우 "p div"는 하위 조합자로 구분된 두 개의 복합 선택자("p" 및 "div")로 구성된 복합 선택자입니다.

예상 동작:

:not()의 레벨 4 사양에 따라 선택기는 "em" 요소에 "blue" 규칙을 적용해야 합니다. "p" 요소 내부에 중첩되어 있는지 여부에 관계없이 "div" 요소 내부에 있어야 합니다.

현재 상태:

Chrome과 Firefox는 결국 새로운 사양을 채택하여 브라우저 전반에 걸쳐 일관된 동작을 구현합니다. 그때까지 개발자는 이러한 브라우저에서 여러 수준의 :not() 선택기를 사용할 때 발생할 수 있는 불일치에 대해 알고 있어야 합니다.

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