ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS `:not()` は直接の子と孫のみを選択的にターゲットにしますか?
CSS `:not()` は直接の子と孫のみを選択的にターゲットにしますか?
- Susan Sarandonオリジナル
- 2024-12-14 18:57:23343ブラウズ
:not() セレクターは遠い子孫まで拡張されますか?
CSS3 では、:not() 擬似クラスが方法を提供しますセレクターから特定の要素を除外します。ただし、遠い子孫を扱う場合、その動作は混乱を招く可能性があります。
現在の実装
公式ドキュメントとブラウザのサポート分析によると、:not() セレクターのみターゲット要素の直接の子または孫に適用されます。
これを考慮してください。例:
div *:not(p) { color: red; }
このルールは、
のすべての直接の子または孫のスタイルを設定します。
ではないもの
ただし、:not() セレクターは孫を超えて拡張されません。
問題
この例では、
<div>
<ul>
<li>This is red</li>
</ul>
<p>This is NOT</p>
<blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>
の直接の子または孫ではありません。この場合、
要素はの子孫であるため *:not(p) 条件に一致しますが、要素は *:not(p) 条件に一致します。その中の要素は赤色を継承します。
解決策
の正しい動作は次のとおりです。要素をデフォルトの色のままにします。これを実現するには、ルールはすべての
をターゲットにする必要があります。要素を直接:
div p { color: black; }CSS セレクター レベル 4 の将来の機能強化
CSS セレクター レベル 4 の提案では、完全な複雑なセレクターを受け入れるように :not() セレクターが強化されています。コンビネータ。これは、次のようなセレクターを作成できることを意味します。
p:not(div p) { color: red; }この拡張された構文により、遠い子孫をより正確にターゲットにすることができます。
以上がCSS `:not()` は直接の子と孫のみを選択的にターゲットにしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。