:empty伪类选中无内容且无子元素的元素，适用于控制空单元格或容器样式；其判定严格，含空格、换行、注释或子元素均不被识别为空，常用于隐藏空td边框或插入占位提示，提升页面整洁度与维护效率。
在CSS中，:empty伪类选择器用于选中页面中没有任何内容的元素。这里的“空”指的是元素内部既没有文本内容，也没有子元素（包括注释节点）。这个选择器非常适合用来控制空单元格、空容器或未填充数据的区域的样式，避免页面出现不必要的视觉干扰。
理解:empty的选择条件
:empty只匹配真正“空”的元素。只要元素内包含以下任意一项，就不会被选中：
- 文本内容（即使是空格或换行符）
- HTML子元素
- 注释节点（如<!-- 注释 -->）
例如，下面这个div会被:empty选中：
div:empty { background: #f0f0f0; }<div></div>而这些则不会被选中：
立即学习“前端免费学习笔记（深入）”；
<div> </div>（包含空格） <div><p></p></div>（包含子元素） <div><!-- 备注 --></div>（包含注释）实用场景：表格空单元格处理
在数据表格中，某些单元格可能没有数据。使用:empty可以隐藏这些空白单元格的边框或背景，使表格更整洁。
td:empty { background: transparent; border: none; }这样，没有内容的<td>将不会显示背景色或边框，提升可读性。
表单字段占位提示控制
对于动态填充的内容区域（如用户简介），可以在为空时显示提示文字，同时通过:empty隐藏默认样式。
.profile-bio:empty::before { content: "暂无个人介绍"; color: #999; font-style: italic; }当.profile-bio为空时，插入提示语；一旦有内容，该提示自动消失，无需JavaScript干预。
避免常见误区
开发者常误以为只有完全没写内容的标签才算空。实际上，HTML中的换行和空格也会让元素“非空”。若想确保元素被识别为空，建议在编写HTML时保持标签紧凑：
<div class="content"></div>而不是：
<div class="content"> </div>后者因换行符被视为文本节点，导致:empty失效。
基本上就这些。合理使用:empty能有效简化对空状态的样式管理，减少JavaScript介入，提升维护效率。关键是理解其判定逻辑，避免因看不见的空白字符导致选择失败。
