CSS `:not()` は直接の子と孫のみを選択的にターゲットにしますか?

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