:empty伪类仅匹配DOM结构上完全无子节点（含文本、元素、注释、空白符等）的元素；哪怕存在空格、换行或注释即不匹配，需结合HTML规范书写与JavaScript辅助处理视觉为空场景。
使用 :empty 伪类可以精准选中**完全不包含任何子节点（包括文本节点、元素节点、注释等）的元素**。
什么是 :empty？
:empty 是 CSS 原生伪类，匹配那些内部**既没有文本内容、也没有子元素、也没有空格或换行符**的元素。注意：哪怕有一个空格、一个换行、一条 HTML 注释，该元素就不再被 :empty 匹配。
:empty 的常见误判情况
以下这些元素 不会被 :empty 选中：
- 含有空白字符（如空格、制表符、换行）：\n
- 含有 HTML 注释：
- 含有不可见的 Unicode 字符（如零宽空格）
- 含有自闭合标签（但实际无效，
如何真正选中“视觉上为空”的元素？
:empty 无法解决“有空格但看起来空”的问题。若需更宽松判断，需结合其他手段：
立即学习“前端免费学习笔记（深入）”；
- HTML 层面：写标签时避免换行和空格，如
而非多行缩进写法 - 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 协同。
