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

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

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

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

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

このセレクターは <p> のときに機能します。 <div> の直接の子であるため、<p> の場合は失敗します。もっと遠い子孫です。 :not() はターゲット要素の直接の子孫のみを否定するため、この動作は意図的です。

<p> が含まれている場合、それは <blockquote> です。 *:not(p) と一致し、スタイルを継承するそれ自体。 <p>要素自体は依然として否定の対象となり、親からテキストの色を継承します。

p { color: black; }

この制限を克服するには、<p> をターゲットにします。要素を直接指定することをお勧めします。

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

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