「input:not(:empty)」が期待どおりに動作しないのはなぜですか?

:not(:empty) CSS セレクターの謎を明らかにする

空または空でない入力の外観を制御しようとする場合:not(:empty) CSS セレクターを使用してフィールドを作成すると、多くの開発者が予期しない動作に遭遇します。このセレクターは他の組み合わせでは問題なく機能するように見えますが、:not(:empty) がミックスに追加されると異常が発生します。

混乱は、入力要素の固有の性質に起因します。 HTML では、void 要素を、 など、「本質的に空である」要素として定義します。タグ。その結果、すべての void 要素は、その value 属性に関係なく、:empty 疑似クラスによって一貫して空とみなされます。

さらに、Selectors 仕様では、:empty が子ノードを持たない要素を対象とすることが明示的に述べられています。テキストコンテンツ。その結果、入力フィールドには値があるにもかかわらず、常に子ノードが不足するため、:not(:empty) セレクターと一致します。

要約すると、適切な HTML で input:not(:empty) を使用します。ドキュメントは常に何も一致しません。この制限は、HTML の void 要素の固有の性質と、CSS セレクターの :empty 擬似クラスの定義により発生します。

以上が「input:not(:empty)」が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。