CSS :not() は遠い子孫要素を選択的にターゲットにしますか?

要素は :not(p) 基準に一致し、その色は赤に設定されます。続いて、

要素は、親

からこの色を継承します。

期待される動作と実際の動作

あなたは

を期待していました。要素は :not() セレクターの影響を受けずに残りますが、色の変更は継承されます。これは、遠い子孫をターゲットにするための意図された動作ではありません。

解決策

スタイルのみを具体的に指定するには

div p {
    color: black;
}

ログイン後にコピー

CSS セレクター レベル 4 の機能強化

CSS セレクター レベル 4 では、次の拡張を提案しています。 not() を使用して、コンビネータを持つ複雑なセレクタを受け入れます。これにより、より柔軟に遠くの子孫をターゲットにすることができます。実装したら、次のようなセレクターを作成できます。

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

ログイン後にコピー

このセレクターは、すべての

をターゲットにします。

の直接の子孫ではない要素。

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