：not（：empty）CSS选择器不起作用？

  • Z时代
  • 2024-01-10
  • 分类：问答

我在使用这个特定的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元素，HTML定义“空”会将元素<input>视为空，因为所有void元素的内容模型

始终为空。因此:empty，无论它们是否有值，它们都将始终与伪类匹配。这也是为什么它们的值由开始标签中的属性而不是开始标签和结束标签中的文本内容表示的原因。

另外，根据Selectors规范：

该:empty伪类表示，在所有没有孩子的元素。就文档树而言，只有其数据长度为非零的元素节点和内容节点（例如DOM文本节点，CDATA节点和实体引用）才应被视为影响空度。

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

我认为您不能<input>仅使用CSS来动态设置空字段的样式（即，只要字段为空，并且一旦输入文本就不应用规则）。如果它们具有空属性（）或完全缺少属性（），则可以选择

初始为 空的字段，仅此而已。value``input[value=""]``input:not([value])

以上是 ：not（：empty）CSS选择器不起作用？ 的全部内容， 来源链接： utcz.com/qa/430472.html

回到顶部