Chrome や Firefox と比較して、Safari では `:not()` セレクターの動作が異なるのはなぜですか?

:not() セレクターの相違: Safari と Chrome/Firefox

:not() CSS セレクター。特定の要素を除外するために使用されます。一部を選択すると、Safari では Chrome や Firefox と比べて動作が異なることが判明しています。この矛盾は開発者に混乱を引き起こし、その根本的な原因の調査を促しています。

最近の観察によると、Safari は現在、引数で複雑なセレクターを許可する :not() のレベル 4 仕様を完全にサポートしています。この機能により、jQuery の実装と整合性が取れます。ただし、Chrome と Firefox は現在、:not() の引数として単純なセレクターのみをサポートしています。

:not() セレクターの異常は、括弧内で複雑なセレクターを使用することに起因します。複雑なセレクターは、子孫、隣接する兄弟、一般的な兄弟などのコンビネータによって結合された複数の単純なセレクターで構成されます。提供されたコード スニペットでは、セレクター p div は、2 つの単純なセレクター (p と div) を子孫コンビネーターと結合するため、複雑なセレクターを表します。

Chrome と Firefox は、:not( の複雑なセレクターをサポートしていないため、 ) 引数を指定した場合、提供されたコードの p div 部分は認識されません。その結果、:not() セレクターは事実上無視され、フォールバック ルール em:not(...) が適用されます。すべての 要素の色として赤を指定するこのフォールバック ルールは、Chrome と Firefox で観察される赤いテキストの原因となります。

逆に、Safari では、:not() で複雑なセレクターがサポートされています。 、

内の 要素が正しく除外されます。赤色仕様の要素。その結果、Safari では青いテキストが表示されます。

現時点では、Chrome と Firefox が :not() の複雑なセレクターをサポートする時期は不明のままです。ただし、Safari でのレベル 4 仕様の実装は、最新の Web 標準に合わせて CSS セレクターの機能を強化する重要な開発です。

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