:empty 选择器仅在子节点数为0时生效，因换行符、空格、注释等均生成文本节点而常失效；现代可用 :not(:has(*)) 替代，但兼容性有限；js 判断更可靠。
:empty 是最直接的解法，但它只在 DOM 结构真正“一无所有”时才生效——连换行符、空格、注释都不能有。
为什么 :empty 经常不生效？
它不是看“视觉上空”，而是严格检查 childNodes.length === 0。常见失效原因包括：
-
<div>\n</div>：换行符生成了文本节点 -
<div> </div>：空格也是文本节点 -
<div><!-- loading --></div>：注释节点存在 - Vue/React 模板注入的空白或
<slot>fallback</slot>内容 - 服务端渲染未压缩 HTML，缩进自动变成文本节点
现代浏览器可用 :not(:has(*)) 替代
:not(:has(*)) 比 :empty 更严格，它要求“一个子节点都不能有”，包括文本、注释、元素。但它同样受空白影响，且仅支持 Chrome 105+、Firefox 119+、Safari 15.4+：
.container:not(:has(*)) {
display: none;
}
注意：:not(:has(.item)) 和 :not(:has(*)) 完全不同——前者只排除特定类名元素，后者排除一切子节点。
JS 动态判断更可靠，尤其在框架或动态内容场景
纯 CSS 方案在真实项目中极易失效，推荐用 JS 主动检测并加 class：
- 用
el.childElementCount === 0 && el.textContent.trim() === ''判断“语义空” - 避免用
innerHTML，防止误判标签或触发重排 - 配合
MutationObserver监听子节点变化，而不是只在DOMContentLoaded执行一次 - 插入前先检查
getComputedStyle(el).display !== 'none'，跳过已隐藏元素
Web Component、富文本输入、SSR 输出等场景下，DOM 结构不可控，:empty 几乎无法信任。
真正难的不是写对选择器，而是确认“空”的定义是否和你的数据流一致——HTML 解析规则、框架渲染逻辑、JS 运行时判断，三者稍有偏差，:empty 就会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
