：not（：empty）CSS选择器不工作？ [英] :not(:empty) CSS selector is not working?

问题描述

我对这个特定的CSS选择器有一点困难，当我添加：not（：empty）不想工作。它似乎与其他选择器的任何组合工作正常：

  input：not ）：not（：focus）：invalid {border-color：＃A22; box-shadow：none} 
  

如果我删除：not ）部分，它工作正常。即使我将选择器更改为 input：not（：empty），它仍然不会选择有文本键入的输入字段。这是破坏还是我只是不允许在：not（）选择器中使用：empty >

我可以想到的唯一其他的事情是，浏览器仍然说元素是空的，因为它没有孩子，只是一个值每说。 ：empty 选择器对于输入元素与常规元素是否具有单独的功能？这似乎不可能，虽然因为在字段上使用：empty 并在其中键入内容将导致替代效果消失（因为它不再是空的）。

在Firefox 8和Chrome中测试。

解决方案

< input> 元素被视为空元素（或 void元素）的HTML定义。因此，它们将始终匹配：empty 伪类，无论它们是否具有值。

从选择器规范：

：empty 伪类表示一个没有子节点的元素。在文档树中，只有数据具有非零长度的元素节点和内容节点（例如DOM文本节点，CDATA节点和实体引用）必须被视为影响空白;

最后， value 是表单输入元素的DOM属性，它不是

因此，输入：not（：empty）不会选择正确的HTML文档中的任何内容。

我不认为你可以样式空< input> 动态使用CSS的字段（即，当字段为空时，不输入文本时应用的规则）。如果空字段具有空的值属性（ input [value =] c $ c>）或缺少属性（输入：not（[value]）），但这就是关键。

I'm having a heck of a time with this particular CSS selector which does not want to work when I add :not(:empty) to it. It seems to work fine with any combination of the other selectors:

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

If I remove the :not(:empty) part, it works just fine. Even if I change the selector to input:not(:empty) it still won't select input fields which have text typed into them. Is this broken or am I just not allowed to use :empty within a :not() selector?

The only other thing I can think of is that browsers are still saying that the element is empty because it has no children, just a "value" per say. Does the :empty selector not have separate functionality for an input element versus a regular element? This doesn't seem probable though because using :empty on a field and typing something into it will cause the alternate effects to go away (because it is no longer empty).

Tested in Firefox 8 and Chrome.

解决方案

<input> elements are considered empty elements (or void elements) by the HTML definition of "empty". So they will always match the :empty pseudo-class, whether or not they have a value.

Also, from the 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;

And finally, while value is a DOM property of form input elements, it's not a child in terms of the document tree, unlike text nodes, so it doesn't affect emptiness.

Consequently, input:not(:empty) will never select anything in a proper HTML document.

I don't think you can style empty <input> fields dynamically using just CSS (i.e. rules that apply whenever a field is empty, and don't once text is entered). You can select initially empty fields if they have an empty value attribute (input[value=""]) or lack the attribute altogether (input:not([value])), but that's about it.

这篇关于：not（：empty）CSS选择器不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！