使用 :empty 伪类可选择无任何内容的空元素,如不含文本、子元素或空白字符的 div,仅第一个空 div 被选中,常用于隐藏空容器或表单校验。

在css中,如果你想选择没有任何子元素或内容的空元素,可以使用 :empty 伪类选择器。
使用 :empty 选择空元素
:empty 会选择页面中内部没有任何内容、文本、子元素或空白字符的元素。
例如:
html:
立即学习“前端免费学习笔记(深入)”;
<div></div>
<div> </div>
<div>内容</div>
CSS:
div:empty {
background-color: yellow;
}
只有第一个 <div></div> 会被选中并高亮,因为它是真正“空”的。第二个包含空格,不被视为空元素。
注意点:什么是“空”?
一个元素要被 :empty 匹配,必须满足:
- 没有子元素
- 没有文本内容
- 没有空格、换行或制表符(这些也算字符)
也就是说,哪怕只有一个空格,:empty 就不会匹配。
实际应用场景
常见用途包括:
- 隐藏未填充内容的容器
- 为动态加载内容的占位符设置样式
- 表单校验时标记未填写的字段(配合js更有效)
基本上就这些。使用 :empty 可以方便地识别真正的空元素,但要注意空白字符的影响。处理时建议确保结构干净,或结合javaScript做更精确判断。


