首页 > web前端 > css教程 > 为什么 :not(:empty) 不适用于带有文本的输入字段?

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

DDD
发布: 2024-11-04 15:00:33
原创
379 人浏览过

Why Doesn't :not(:empty) Work for Input Fields with Text?

: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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板