:empty选择器用于选中无子节点的元素，包括文本、空格或子元素；其语法为selector:empty{}，可应用于表单校验、占位提示及隐藏空元素；需注意注释不视为内容，但空格和换行会影响匹配，现代浏览器广泛支持。
在CSS中，:empty 选择器用于选中没有任何内容的元素。这里的“内容”指的是文本节点、子元素或空格等可见内容。如果一个元素内部完全为空，就可以用 :empty 来匹配并为其设置样式。
什么是:empty选择器？
:empty 是一个伪类选择器，用来选择那些没有子节点的元素。注意：哪怕是一个空格或换行符，也会让元素不再被视为“空”。
例如：
<div></div> <!-- 可被 :empty 匹配 --> <div> </div> <!-- 不会被匹配（包含空格）--> <div><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div> <!-- 不会被匹配（有子元素）-->
基本语法与使用方法
使用方式和其他CSS选择器一样：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
div:empty {
height: 50px;
background-color: #f0f0f0;
border: 1px dashed #ccc;
}
上面的代码会为所有没有内容的 div 元素添加背景和边框，常用于占位提示或视觉留白处理。
实际应用场景
:empty 在实际开发中有几个常见用途：
- 表单字段校验提示：当某个必填项为空时，通过JavaScript移除其内容，再用 :empty 样式高亮显示未填写项。
- 动态内容容器占位：比如评论区加载中或暂无数据时，给空容器添加提示样式。
- 隐藏空元素：避免页面出现不必要的空白区域。
示例：隐藏空的提示框
.alert:empty {
display: none;
}
这样可以自动隐藏那些本应显示消息但实际为空的提示框，提升用户体验。
注意事项与兼容性
使用 :empty 时需要注意以下几点：
- HTML注释不算“内容”，所以
<div><!-- 注释 --></div>仍会被视为 empty。 - 换行和空格属于文本节点，会导致元素不为空。
- 现代浏览器普遍支持 :empty，包括IE9及以上版本。
基本上就这些。合理使用 :empty 能让你更灵活地控制页面中“空状态”的表现，减少JavaScript干预，提升样式维护效率。
