为什么 :not(:empty) 不适用于带有文本的输入字段？

:not(:empty) CSS 选择器不起作用

:not(:empty) 选择器无法定位包含文本内容的输入字段。组合多个选择器时会出现此问题，特别是 :not(:empty):not(:focus):invalid。删除 :not(:empty) 可以解决问题，但在 :not() 中使用它似乎不一致。

澄清一下，:empty 选择器指示没有子节点的元素。在输入元素的上下文中，这包括那些没有文本内容的元素。然而，HTML 定义将输入元素分类为 void，这意味着它们本质上是空的。

如选择器规范中所述，“:empty 伪类表示根本没有子元素的元素”。这包括输入元素，无论其值如何，因此 input:not(:empty) 实际上永远不会选择有效 HTML 中的任何内容。

虽然 CSS 本身无法动态设置空输入字段的样式，但您可以使用 [value 来定位最初为空的字段=""] 或 :not([value]) 来设计适当的初始状态。

以上是为什么 :not(:empty) 不适用于带有文本的输入字段？的详细内容。更多信息请关注PHP中文网其他相关文章！