html - :not(:empty) CSS selector is not working?

Question

我对这个特定的 CSS 选择器感到厌烦，当我向它添加 :not(:empty) 时它不想工作。它似乎可以与其他选择器的任意组合一起正常工作:

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

如果我删除 :not(:empty) 部分，它就可以正常工作。即使我将选择器更改为 input:not(:empty)，它仍然不会选择输入了文本的输入字段。这是坏了还是我不允许在 :not() 选择器中使用 :empty？

我唯一能想到的另一件事是浏览器仍然说该元素是空的，因为它没有子元素，只是一个“值”。 :empty 选择器对输入元素和常规元素没有单独的功能吗？这似乎不太可能，因为在字段上使用 :empty 并在其中键入内容会导致替代效果消失(因为它不再为空)。

在 Firefox 8 和 Chrome 中测试。

Answer 1

成为 void element , 一个 <input>元素被认为是empty根据“空”的 HTML 定义，因为所有 void 元素的内容模型始终为空。所以他们总是匹配 :empty伪类，无论它们是否具有值(value)。这也是为什么它们的值由开始标记中的属性而不是开始和结束标记中的文本内容表示的原因。

此外，来自 Selectors spec :

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

因此，input:not(:empty)永远不会匹配正确的 HTML 文档中的任何内容。 (它仍然可以在一个假设的 XML 文档中工作，该文档定义了一个可以接受文本或子元素的 <input> 元素。)

我不认为你可以设置为空 <input>仅使用 CSS 动态字段(即只要字段为空就适用的规则，一旦输入文本则不适用)。如果空字段的 value 为空，您可以选择最初空字段属性 ( input[value=""] ) 或完全缺少属性 ( input:not([value]) )，仅此而已。