「input:not(:empty)」が常に結果を返さないのはなぜですか?

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

:empty CSS セレクターは、子要素を含まない要素と一致するように設計されています。ただし、:not() セレクターと組み合わせて使用​​すると、予期しない動作が発生する可能性があります。

入力要素の場合

HTML 要素は「無効な要素」とみなされます。これは、子が存在しないことを意味します。したがって、テキスト値が含まれているかどうかに関係なく、常に :empty セレクターを満たすことになります。

input:not(:empty) を使用する場合、本質的には空と空の両方の要素を要求することになります。空ではない。これは矛盾しているため、セレクターは結果を返さないのです。

CSS スタイルへの影響

この動作は CSS スタイルに影響を与えます。 input:not(:empty) を使用して、入力フィールドが空かどうかに基づいて動的にスタイルを設定することはできません。

代替ソリューション

最初は空の入力をスタイルするにはフィールドでは、input[value=""] や input:not([value]) などのセレクターを使用できます。ただし、ユーザーがフィールドにテキストを入力すると、これらのセレクターと一致しなくなります。

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