CSS :not() は遠い子孫を選択的に除外しますか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-11-30 17:14:11

オリジナル

514 人が閲覧しました

Does CSS :not() Selectively Exclude Distant Descendants?

距離の子孫と 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 サイトの他の関連記事を参照してください。