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

CSS :not() セレクターは遠い子孫まで拡張されますか?

CSS3 :not() 擬似クラスでは、セレクターでの否定が許可され、一致する要素は除外されます。指定されたパターン。ただし、その機能には制限があります。

現在の実装

CSS3 および CSS セレクター レベル 4 のドキュメントで説明されているように、:not() は現在、直接の子孫とのみ一致します。 。提供された例では:

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

このセレクターは

の直接の子をターゲットとしています。

ではないもの。

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

継承とスタイル

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

内の要素

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

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

今後の拡張機能

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

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

Recommendations

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

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