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

ではないもの

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