:empty伪类选中无内容且无子元素的元素，适用于控制空单元格或容器样式；其判定严格，含空格、换行、注释或子元素均不被识别为空，常用于隐藏空td边框或插入占位提示，提升页面整洁度与维护效率。

在CSS中，:empty伪类选择器用于选中页面中没有任何内容的元素。这里的“空”指的是元素内部既没有文本内容，也没有子元素（包括注释节点）。这个选择器非常适合用来控制空单元格、空容器或未填充数据的区域的样式，避免页面出现不必要的视觉干扰。

理解:empty的选择条件

:empty只匹配真正“空”的元素。只要元素内包含以下任意一项，就不会被选中：

• 文本内容（即使是空格或换行符）
• HTML子元素
• 注释节点（如）

例如，下面这个div会被:empty选中：

div:empty { background: #f0f0f0; }

而这些则不会被选中：

立即学习“前端免费学习笔记（深入）”；

（包含空格）

（包含子元素）

（包含注释）

实用场景：表格空单元格处理

在数据表格中，某些单元格可能没有数据。使用:empty可以隐藏这些空白单元格的边框或背景，使表格更整洁。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

td:empty { background: transparent; border: none; }

这样，没有内容的

将不会显示背景色或边框，提升可读性。

表单字段占位提示控制

对于动态填充的内容区域（如用户简介），可以在为空时显示提示文字，同时通过:empty隐藏默认样式。

.profile-bio:empty::before { content: "暂无个人介绍"; color: #999; font-style: italic; }

当.profile-bio为空时，插入提示语；一旦有内容，该提示自动消失，无需JavaScript干预。

避免常见误区

开发者常误以为只有完全没写内容的标签才算空。实际上，HTML中的换行和空格也会让元素“非空”。若想确保元素被识别为空，建议在编写HTML时保持标签紧凑：

而不是：

后者因换行符被视为文本节点，导致:empty失效。

基本上就这些。合理使用:empty能有效简化对空状态的样式管理，减少JavaScript介入，提升维护效率。关键是理解其判定逻辑，避免因看不见的空白字符导致选择失败。