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

CSS :not() セレクターは遠い子孫を対象としていますか?

で説明されている CSS3 :not() 擬似クラスhttp://www.w3.org/TR/css3-selectors/#negation にある公式ドキュメントは、次のように設計されています。指定されたセレクターに一致しない要素と一致します。ただし、ユーザーは、遠い子孫での使用では機能が制限されていることに気づきました。

次の例を考えてみましょう。

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

このセレクターは

のときに機能します。

の直接の子であるため、

の場合は失敗します。もっと遠い子孫です。 :not() はターゲット要素の直接の子孫のみを否定するため、この動作は意図的です。

が含まれている場合、それは

です。 *:not(p) と一致し、スタイルを継承するそれ自体。

要素自体は依然として否定の対象となり、親からテキストの色を継承します。

p { color: black; }

この制限を克服するには、

をターゲットにします。要素を直接指定することをお勧めします。

セレクター レベル 4 では、:not() を強化して、コンビネータを含む完全な複雑なセレクターを受け入れ、より具体的な子孫のターゲティングを可能にすることを提案しています。ただし、この機能はまだ実装段階にあります。

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

前の記事：Web 開発で Unicode 絵文字の色をカスタマイズするにはどうすればよいですか? 次の記事：HTML と CSS で横書きのテキストのみのメニューを完全に両端揃えするにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2970

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

3174

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2584

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

2538

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

2577

関連トピック

詳細>

• WIN10アップデート失敗の解決策
• Java の 4 つの主要な IO モデルは何ですか?
• Internalerror0x06 の解決方法
• Linuxでハードドライブをフォーマットする方法
• isalpha関数の使い方
• php5とphp7の違いは何ですか
• prtscrnボタンはどこにありますか?
• Java正規表現構文