検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS :not() は遠い子孫要素を選択的にターゲットにしますか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-06 18:58:16354ブラウズ

Does CSS :not() Selectively Target Distant Descendant Elements?

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

css css3 for class this
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS のみを使用して画像のサイズをレスポンシブに変更するにはどうすればよいですか?次の記事：CSS のみを使用して画像のサイズをレスポンシブに変更するにはどうすればよいですか?

関連記事

続きを見る