CSS :not() は遠い子孫を選択的に除外しますか?

距離の子孫と CSS :not() セレクター

CSS3 :not() 疑似クラスは、特定のセレクターを無効にするように設計されていますマッチ。これはブラウザー全体で広く実装されています。ただし、このセレクターに関するよくある誤解の 1 つは、遠い子孫に適用できるということです。

:not() は直接の子要素の一致を正常に無効にしますが、より遠い子孫に対しては期待どおりに動作しません。以下の例に示すように、

div :not(p) {
    color: red;
}

このスニペットでは、

要素は、

の直接の子孫ではないにもかかわらず、親の

から赤色を継承しています。これは、:not() がその要素の一致を直接否定するだけであり、その子孫を否定しないために発生します。

CSS3 と CSS セレクター レベル 4 の両方の :not() のドキュメントでは、この動作について明示的に対処していません。ただし、この動作は意図的なものであることが確認されており、セレクターは孫のマッチングをサポートすることを意図したものではありません。

解決策

目的の結果を達成するには:not() の一致から遠い子孫を除外するには、別の方法を使用する必要があります。一般的なアプローチの 1 つは、除外する特定の要素の色を指定し、継承された値を上書きすることです。

div {
  color: red;
}

div p {
  color: black;
}

CSS セレクター レベル 4 拡張

CSS セレクターレベル 4 では、:not() セレクターの拡張を提案し、セレクター内でより複雑なセレクターを使用できるようにします。この変更により、次の構文で子孫を正しく否定できるようになります:

p:not(div p) {
  color: red;
}

この拡張機能はブラウザにはまだ広く実装されていませんが、:not() を使用して遠い子孫を照合および否定するための有望なソリューションを提供します。

以上がCSS :not() は遠い子孫を選択的に除外しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。