CSS `:not()` セレクターが Safari、Chrome、Firefox で異なる動作をするのはなぜですか?

:not() Safari、Chrome、Firefox 間のセレクターの不一致

ブラウザーは多くの場合、さまざまな機能を備えた機能を実装しており、レンダリングの不一致につながります。 CSS :not() セレクターはそのようなケースの 1 つで、Safari、Chrome、Firefox 間で異なる動作を示します。

問題:

:not()引数に複数のレベルを指定すると、セレクターが期待どおりに動作しません。この例では:

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

Safari はテキストを青でレンダリングしますが、Chrome と Firefox は赤を使用します。

原因:

根本原因これは、Safari のレベル 4 :not() セレクターの最近の実装であり、複雑なセレクターを引数として使用できます。一方、Chrome と Firefox は、:not() の現在のバージョンでは単一レベルの引数のみをサポートします。

説明:

複雑なセレクターには複数の引数が含まれますコンビネータで区切られた複合セレクタ (子孫、兄弟など)。この場合、「p div」は、子孫コンビネータで区切られた 2 つの複合セレクタ (「p」と「div」) で構成される複雑なセレクタです。

期待される動作:

:not() のレベル 4 仕様に従って、セレクターは「em」要素に「blue」ルールを適用する必要があります。これは、「p」要素内にネストされているかどうかに関係なく、「div」要素内にありません。

現在のステータス:

Chrome とFirefox は最終的に新しい仕様を採用し、ブラウザー間で一貫した動作が実現される予定です。それまでは、開発者はこれらのブラウザで複数レベルの :not() セレクターを使用する場合、潜在的な不一致に注意する必要があります。

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