:empty伪类仅匹配DOM结构上完全无子节点（含文本、元素、注释、空白符等）的元素；哪怕存在空格、换行或注释即不匹配，需结合HTML规范书写与JavaScript辅助处理视觉为空场景。
使用 :empty 伪类可以精准选中**完全不包含任何子节点（包括文本节点、元素节点、注释等）的元素**。
什么是 :empty？
:empty 是 CSS 原生伪类，匹配那些内部**既没有文本内容、也没有子元素、也没有空格或换行符**的元素。注意：哪怕有一个空格、一个换行、一条 HTML 注释，该元素就不再被 :empty 匹配。
:empty 的常见误判情况
以下这些元素 不会被 :empty 选中：
- 含有空白字符（如空格、制表符、换行）：
<div>\n </div> - 含有 HTML 注释：
<div><!-- comment --></div> - 含有不可见的 Unicode 字符（如零宽空格）
- 含有自闭合标签（但实际无效，
<br>等仍算子节点）
如何真正选中“视觉上为空”的元素？
:empty 无法解决“有空格但看起来空”的问题。若需更宽松判断，需结合其他手段：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- HTML 层面：写标签时避免换行和空格，如
<div></div>而非多行缩进写法 - CSS 辅助：对可能含空格的容器设置
font-size: 0;或line-height: 0;抑制空白渲染（仅治标） - JavaScript 补充：用
element.innerText.trim() === ''判断逻辑为空，并动态加 class
实用示例
隐藏所有真正为空的提示框：
.tip:empty {
display: none;
}给空表格单元格加虚线边框：
td:empty {
border: 1px dashed #ccc;
}不复杂但容易忽略：:empty 只认 DOM 结构是否为空，不看渲染效果。想覆盖更多“空”场景，得靠 HTML 规范书写 + JS 协同。
