首页 >web前端 >css教程 >为什么 `input:not(:empty)` 没有按预期工作?

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

DDD
DDD原创
2024-11-05 11:02:02565浏览

Why Does `input:not(:empty)` Not Work as Expected?

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn