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

このウェブサイトの声明

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