:not(:empty) CSS 选择器不起作用? [英] :not(:empty) CSS selector is not working?

问题描述

当我将 :not(:empty) 添加到它时，这个特定的 CSS 选择器不想工作，我玩得很开心.它似乎与其他选择器的任何组合都可以正常工作:

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 }

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

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?

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

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).

在 Firefox 8 和 Chrome 中测试.

Tested in Firefox 8 and Chrome.

推荐答案

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

Being a void element, an <input> element is considered empty by the HTML definition of "empty", since the content model of all void elements is always empty. So they will always match the :empty pseudo-class, whether or not they have a value. This is also why their value is represented by an attribute in the start tag, rather than text content within start and end tags.

另外，来自 选择器规范:

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

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> 元素.)

Consequently, input:not(:empty) will never match anything in a proper HTML document. (It would still work in a hypothetical XML document that defines an <input> element that can accept text or child elements.)

我认为您不能仅使用 CSS 来动态设置空 <input> 字段的样式(即，只要字段为空就应用规则，一旦输入文本就不会应用).如果它们有一个空的 value 属性 (input[value=""]) 或完全没有该属性 (input:not([value]))，仅此而已.

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屋！