为什么 :not(:empty) 不适用于输入字段？

理解 :not(:empty) CSS 选择器

:not(:empty) 伪类表示没有任何内容的 HTML 元素孩子们。但是，对于像 这样的 void 元素，此条件始终为 true，无论该元素是否具有归属于它的值。

为什么 :not(:empty) 不适用于输入字段

空元素，例如，没有任何子节点。因此，根据 HTML 定义，它们始终被视为空，并且始终与 :empty 伪类匹配。

此外，选择器规范将 :empty 定义为没有任何子元素的元素，包括文本或非零长度的 CDATA 等子节点。

CSS 样式的后果

因此， input:not(:empty) 永远不会匹配任何 。有效 HTML 文档中的字段。因此，您无法动态设置空 的样式。字段仅基于 CSS 规则，因为一旦输入文本，该元素就不再被视为空。

替代方法

选择空的唯一方法 ;使用 CSS 的字段是基于空值属性 (input[value=""]) 或完全缺少值属性 (input:not([value])) 来定位它们。但是，这是一种静态方法，在填充输入字段值后不会捕获其值的变化。

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