我和这个特定的CSS选择器有一段时间，当我添加时不想工作:not(:empty)对此。其他选择器的任何组合似乎都可以正常工作：
input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }
如果我删除:not(:empty)部分，它的工作正常。即使我将选择器更改为input:not(:empty)它仍然不会选择输入文本的输入字段。这是坏的还是我只是不允许使用:empty在一个:not()选择器？
我唯一能想到的是，浏览器仍在说该元素是空的，因为它没有孩子，只是每句话的"价值"。做:empty选择器对输入元素没有单独的功能，而不是常规元素？这似乎不可能，因为使用:empty在字段上并输入某些内容将导致其他效果消失（因为它不再为空）。
在Firefox 8和Chrome中进行了测试。
答案
成为一个void元素， 一个<input>考虑元素空的通过"空"的HTML定义，因为所有void元素的内容模型总是空的 。:empty伪级，无论它们是否具有价值。这也是为什么它们的值在开始标签中由属性表示的，而不是在开始和结束标签中的文本内容。
另外，从选择器规格：
这
:empty伪级代表根本没有孩子的元素。就文档树而言，只有元素节点和内容节点（例如DOM文本节点，CDATA节点和实体参考），其数据的长度非零长度必须被视为影响空虚；
最后，input:not(:empty)在适当的HTML文档中永远不会匹配任何内容。（它仍然可以在定义一个假设的XML文档中使用<input>可以接受文本或子元素的元素。）
我认为你不能造型空虚<input>仅使用CSS动态字段（即每当字段为空时应用的规则，并且一旦输入文本就不会）。您可以选择最初 空字段，如果他们有空value属性 （input[value=""]）或完全缺乏属性（input:not([value])），但仅此而已。