[解決済み] :not(:empty) CSS セレクタが動作しない？

質問

この特定の CSS セレクタには、非常に苦労しています。 :not(:empty) を追加しても動作しません。他のセレクタのどのような組み合わせでもうまくいくようです。

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

を削除すると :not(:empty) の部分を削除すると、問題なく動作します。セレクタを input:not(:empty) に変更しても、テキストが入力された入力フィールドは選択されません。これは壊れているのでしょうか、それとも単に :empty の中で :not() セレクタの中にあるのですか？

私が考えられる唯一の他のことは、ブラウザはまだ、それが子を持っていないので、要素が空であると言っています、ちょうど"value"あたりです。この場合 :empty セレクタは、input 要素と通常の要素に対して別々の機能を持っていないのでしょうか？しかし、これは可能性が高いとは思えません。 :empty を使用し、フィールドに何かを入力すると、代替効果がなくなるからです (フィールドが空でなくなるため)。

Firefox 8 と Chrome でテストしました。

どのように解決するのですか？

になっている void要素であること であり <input> 要素は 空の は、HTML の "empty" の定義により、全ての void 要素の内容モデルである は常に空だからです。 . ですから、それらは常に :empty 擬似クラスにマッチします。これは、開始タグと終了タグ内のテキストコンテンツではなく、開始タグ内の属性によってそれらの値が表される理由でもあります。

また セレクタの仕様 :

は :empty 擬似クラスは、全く子要素を持たない要素を表します。ドキュメントツリーの観点では、データがゼロでない長さを持つ要素ノードとコンテンツノード（DOMテキストノード、CDATAノード、エンティティ参照など）のみが、空白に影響すると見なされなければなりません。

その結果 input:not(:empty) は適切な HTML ドキュメントでは決してマッチしません。(仮に <input> 要素を定義している仮想の XML ドキュメントではまだ動作します)。

空の <input> フィールドを CSS だけで動的にスタイルすることはできないと思います (つまり、フィールドが空のときは常に適用され、テキストが入力されると適用されないルールです)。選択できるのは 最初は があれば、空のフィールドを選択することができます。 value 属性がある場合 ( input[value=""] ) または属性が全くない ( input:not([value]) ) がありますが、それくらいです。