「input:not(:empty)」がどの要素にも一致しないのはなぜですか?

:not(:empty) CSS セレクターについて

:not() セレクターは、括弧内に指定された一致基準を無効にします。 :empty 疑似クラスに適用される場合、:not(:empty) セレクターは空ではない要素をターゲットにする必要があります。ただし、この組み合わせを使用すると、ユーザーは問題に直面しています。

Void 要素の問題

element は void 要素です。つまり、コンテンツがありません。 HTML の「空」の定義によれば、void 要素は常に空とみなされます。これは、値があるかどうかに関係なく、常に :empty 擬似クラスと一致することを意味します。

セレクター仕様の影響

セレクター仕様では、 :empty pseudo-class は、子ノードのない要素、または長さがゼロ以外のコンテンツ ノードと一致します。そのため、input:not(:empty) の組み合わせは、有効な HTML ドキュメント内のどの要素とも一致しません。

代替ソリューション

Styling empty CSS のみを使用してフィールドを動的に操作するのは難しい場合があります。ただし、値属性が欠落している (input[value=""])、または空の値属性がある (input:not([value])) 初期状態では空のフィールドを選択することは可能です。これらのオプション以外にも、空の のスタイルに対処するための代替メソッドが必要になる場合があります。フィールド。

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