CSS `:not()` セレクターが失敗するのはなぜですか? どうすれば修正できますか?

CSS で :not() セレクターが失敗する理由

jQuery の :not() セレクターは CSS3 準拠を主張しているにもかかわらず、標準とは大きく異なります:not() セレクターCSS.

jQuery 拡張機能

標準の :not() は単一の単純なセレクターのみを引数として受け入れますが、jQuery ではカンマのリストを含む任意のセレクターを許可します。分離されたセレクター。

CSS制限事項

対照的に、標準の :not() には次のような厳しい制限があります。

• カンマ区切りのセレクターを渡すことはできません
• 単純なセレクターを複合に結合することはできませんselectors
• コンビネータは使用できません (例: spacing)

失敗の原因

指定されたシナリオでは、CSS の変更が jQuery の :not() 動作を複製しようとしましたが、これは有効な CSS ではありません。次の理由があります:

• カンマで区切る (例: :not(α, .beta, .gamma)) は許可されません。
• 複合セレクター (例: body > div) を渡すことは、:not() 内では無効です。

純粋な CSS の回避策

望ましい結果を達成するには純粋な CSS では、複数の :not() セレクターを連鎖する必要があります:

#sectors > div:not(.alpha):not(.beta):not(.gamma)

ただし、このアプローチは、jQuery の拡張 :not() 構文よりもエラーが発生しやすく、一貫性がありません。

今後の展開

セレクター 4 の機能強化:not() を使用して、複雑なセレクターのカンマ区切りリストを受け入れます。これにより、jQuery と連携し、将来的にはより汎用性が高くなります。

以上がCSS `:not()` セレクターが失敗するのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。