:empty 伪类选择器用于选中完全无内容的元素，包括无文本、子元素、空白字符等。例如 div:empty 可为无内容的 div 添加样式。只有当元素内真正为空时才匹配，含空格、换行、注释或子元素均不匹配。常用于隐藏空提示框 .tip:empty { display: none; } 或为 td:empty 设置占位符 ::before { content: "—"; }。关键在于确保元素内无任何字符或节点，否则无法生效。
:empty 是 CSS 中的一个伪类选择器，用于选中没有任何内容的元素。这里的“空”指的是元素内部没有文本内容、子元素、图片、表单控件等任何可见或不可见的内容（包括空白字符和换行）。
基本语法
使用方式如下：element:empty { 样式规则 }
例如，给所有空的 div 添加边框：
div:empty { border: 1px dashed #ccc; }
立即学习“前端免费学习笔记（深入）”；
什么情况算“空”？
只有当元素完全为空时，:empty 才会生效。以下情况被视为“非空”：
- 包含文本内容（即使是空格）
- 有子元素（包括注释节点）
- 包含换行或制表符等空白字符（在某些情况下也会被当作内容）
例如：
✅ 匹配 :empty
实用场景示例
常用于表单或列表中提示空状态：
比如隐藏空的提示容器：
.tip:empty { display: none; }
或者为没有内容的单元格设置占位样式：
td:empty::before { content: "—"; color: #999; }
基本上就这些。关键是理解“空”的定义——真正的一无所有。稍微有点内容，:empty 就不会生效。处理时建议确保元素内无空格或换行，否则可能无法命中预期样式。不复杂但容易忽略细节。
