:empty选择器用于匹配不含任何子节点的元素，包括文本、空格、标签或注释。例如，仅<div class="box"></div>会被.box:empty选中，其余含空格、子标签或文字的均不匹配。需注意换行、缩进和注释也会导致元素非空，常用于隐藏未填充容器或表单验证等场景。
使用 CSS 的 :empty 伪类可以选择页面中“真正为空”的元素。所谓“空”，指的是元素内部没有任何内容，包括文本、空格、换行、子元素等。
什么是:empty选择器？
:empty 是一个结构伪类，用于匹配没有子节点的元素。这里的“子节点”包括：
- 文本内容（哪怕是一个空格）
- HTML标签（子元素）
- 注释节点
只要存在其中任意一种，该元素就不算“空”，:empty 就不会匹配。
基本用法示例
假设你有以下 HTML：<div class="box"></div> <div class="box"> </div> <div class="box"><p></p></div> <div class="box">内容</div>
CSS 中使用 :empty：
立即学习“前端免费学习笔记（深入）”；
.box:empty {
background-color: lightgreen;
height: 50px;
border: 1px dashed green;
}
只有第一个 <div class="box"></div> 会被选中并应用样式，因为它是真正空的。
第二个包含一个空格，第三个包含一个 <p> 标签，第四个有文字，它们都不会被 :empty 匹配。
常见注意事项
实际开发中容易忽略的细节：
- 换行和缩进也算内容：如果 HTML 中元素换行书写，浏览器会解析出空白文本节点，导致不为空
- 注释也算内容：<div><!-- comment --></div> 不是空元素
- 仅包含全角空格或特殊空白字符（如 ）仍被视为非空
实用场景建议
可用于以下情况：
- 隐藏未填充的容器：比如动态内容加载前的占位块
- 表单验证提示：当输入框无值时显示特殊样式（配合 JS 更好）
- 排版优化：避免空 div 影响布局
基本上就这些。关键在于理解“空”的严格定义——任何可见或不可见的内容都会让元素不再“空”。
