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

ではないもの。

内に含まれている場合でも、より遠い子孫にある要素。

継承とスタイル

スタイル プロパティの継承により、:not() の動作がさらに複雑になる可能性があります。質問の例では、

内の要素

であっても、親から赤色のテキストの色を継承します。それ自体は :not() セレクターと一致します。これは、指定された基準を満たす親要素

に否定が適用されるためです。

今後の拡張機能

CSS セレクター レベル 4 では、次の拡張を提案しています。 not() を使用して、完全な複合セレクターとコンビネーターを含めます。これにより、より詳細なフィルタリングが可能になり、次のようなセレクタが有効になります。

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

ログイン後にコピー

Recommendations

:not() の現在の制限と継承との潜在的な混乱のため、一般に、遠い子孫のフィルタリングには使用しないことをお勧めします。直接セレクターを使用するか、除外したい要素に特定のスタイルを適用するなど、別のアプローチを検討してください。 :not() での複雑なセレクターのサポートが実装されると、この機能はさらに便利になる可能性があります。

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