:not(:empty) CSS 选择器不起作用？

Question

当我添加 :not(:empty) 到它时，我对这个特殊的 CSS 选择器有一段不希望的工作。它似乎与其他选择器的任何组合都可以正常工作：

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

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

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

在 Firefox 8 和 Chrome 中测试。

原文由 animuson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

作为一个 void 元素，一个 <input> 元素被 HTML 的“empty”定义认为是 空 的，因为所有 void 元素的内容模型 总是空 的。所以它们总是匹配 :empty 伪类，不管它们是否有值。这也是为什么它们的值由开始标记中的属性表示，而不是开始和结束标记中的文本内容。

此外，从 选择器规范：

:empty 伪类表示一个根本没有子元素的元素。就文档树而言，只有数据长度非零的元素节点和内容节点（如DOM文本节点、CDATA节点、实体引用）才需要考虑影响空性；

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

我不认为您可以仅使用 CSS 动态地设置空 <input> 字段的样式（即，只要字段为空就适用的规则，一旦输入文本就不会）。如果它们有一个空的 value 属性（ input[value=""] ）或完全没有该属性（ input:not([value]) ），您可以选择 最初 为空的字段，但仅此而已。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果要检查输入字段是否为空，可以尝试以下操作：

HTML

 <input type="text" placeholder='Placeholder'/>

CSS

 input:not(:placeholder-shown){
   background-color: red;
}

由于在输入字段中键入内容时占位符会消失，因此我们可以通过 CSS 检查占位符是否可见

原文由 Muhammad Tahir Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议