为什么 `input:not(:empty)` 没有按预期工作？

揭开 :not(:empty) CSS 选择器的神秘面纱

当尝试控制空或非空输入的外观时使用 :not(:empty) CSS 选择器的字段，许多开发人员会遇到意外的行为。这个选择器似乎与其他组合完美地配合使用，但是一旦将 :not(:empty) 添加到组合中就会引入异常。

混乱源于输入元素的独特性质。 HTML 将 void 元素定义为“本质上是空的”元素，包括 元素。标签。因此，所有 void 元素，无论其 value 属性如何，都会被 :empty 伪类视为空。

此外，选择器规范明确指出 :empty 目标元素没有子节点，包括文本内容。因此，输入字段尽管有值，但始终缺少子节点，因此会匹配 :not(:empty) 选择器。

总之，在正确的 HTML 中使用 input:not(:empty)文档总是无法匹配任何内容。这种限制是由于 HTML 中 void 元素的固有性质以及 CSS 选择器中 :empty 伪类的定义而产生的。

以上是为什么 `input:not(:empty)` 没有按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！