CSS `:not()` セレクターを使用すると、Safari、Chrome、Firefox で異なる結果が表示されるのはなぜですか?

: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 では赤色で表示されます。この動作は、Safari の最近の更新により、:not() のレベル 4 バージョンが実装され、より複雑なセレクターを処理できるようになりました。

:not() の現在の実装では、単純なセレクターが 1 つだけです。セレクターは引数としてサポートされています。 「p div」などの複雑なセレクターは、現在設計上サポートされていません。したがって、Chrome と Firefox では、:not(p div) ルールは適用できず、「FOO」テキストは最初のルールに従って赤色を継承します。ただし、

Safari は、より高度なルールを実装しています。レベル 4 仕様。:not() 引数の複雑なセレクターを許可します。したがって、:not(p div) ルールは「FOO」要素と一致し、その結果青色になります。

この矛盾は、ブラウザ間互換性のある Web サイトを開発する際の潜在的な課題と考慮事項を浮き彫りにしています。新しいバージョンのブラウザでは更新された CSS 仕様が導入されるため、ブラウザの互換性と潜在的な実装の違いを追跡することが必要になります。

以上がCSS `:not()` セレクターを使用すると、Safari、Chrome、Firefox で異なる結果が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。