テキストを含む入力フィールドでは :not(:empty) が機能しないのはなぜですか?

:not(:empty) CSS セレクターが機能しない

:not(:empty) セレクターがテキスト コンテンツを含む入力フィールドをターゲットにできない。この問題は、複数のセレクター、特に :not(:empty):not(:focus):invalid を組み合わせるときに発生します。 :not(:empty) を削除すると問題は解決しますが、:not() 内で使用すると矛盾するようです。

明確にするために、:empty セレクターは子ノードのない要素を示します。入力要素のコンテキストでは、これにはテキストコンテンツのないものも含まれます。ただし、HTML 定義では、入力要素は void として分類されます。これは、入力要素が本質的に空であることを意味します。

セレクターの仕様に記載されているように、「:empty 擬似クラスは、子をまったく持たない要素を表します。」これには、値に関係なく入力要素が含まれるため、input:not(:empty) は有効な HTML 内で事実上何も選択しません。

CSS だけでは空の入力フィールドを動的にスタイル設定できませんが、[value] を使用して最初から空のフィールドをターゲットにすることができます。 =""] または :not([value]) を使用して、適切な初期状態を設計します。

以上がテキストを含む入力フィールドでは :not(:empty) が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。