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

CSS :not() セレクターは遠い子孫をターゲットにできますか?

CSS3 :not() 擬似クラスは要素を除外することを目的としています指定されたセレクターに一致するもの。遠い子孫をターゲットにするサポートは限定的です。

実装とサポート

:not() セレクターは最新のブラウザに部分的に実装されていますが、遠い子孫をターゲットにするサポートはありません。は限られています。これは主に要素の直接の子に対して動作します。

遠い子孫の動作

この例では、:not(p) セレクターは

内の要素は、たとえ

の子孫であっても。これは、:not() が直接の子セレクターのみを否定するためです。

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

要素は、親

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

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

あなたは

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

解決策

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

div p {
    color: black;
}

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

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

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

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

をターゲットにします。

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

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