:empty常不生效，因它仅匹配无任何子节点（含空白符）的元素；而模板生成的html常含换行/空格等文本节点，导致失配；:not(:has(*))更实用，可忽略空白节点，仅检测真实子元素，兼容chrome 105+、safari 15.4+、edge 105+。
为什么:empty经常不生效
因为:empty只匹配子节点数为 0 的元素——连一个换行符、空格、<!-- comment -->都算“有内容”。你在模板里写<div></div>，但实际 DOM 很可能是<div>\n </div>，那个\n就是#text节点，:empty直接跳过。DevTools Elements 面板里只要看到#text（哪怕只有一行空白），就说明不匹配。
常见假空场景：
-
<div>{{ data }}</div>中data为空时，Vue/React 模板常保留前后空白文本节点 - 服务端模板（Jinja2、EJS）默认输出带缩进的 HTML，换行即生成文本节点
-
<img>、<input>等自闭合标签不是容器元素，:empty根本不会匹配它们
:not(:has(*))比:empty更实用
:not(:has(*))忽略空白文本节点，只看是否有真实子元素（标签或非空文本），语义更贴近“逻辑空”，且无需 JS 干预。它能匹配<div>\n </div>这类含空白但无子元素的容器。
兼容性注意：
- Chrome 105+、Safari 15.4+、Edge 105+ 支持
- IE 和 Safari
- 不要混用
div:empty, div:not(:has(*))——不支持:has()的浏览器会直接忽略整条规则
写法示例：div:not(:has(*)) { display: none; }，比div:empty更少误判。
JS 判断才是生产环境最稳的解法
当内容来自 Vue/React 渲染、第三方 SDK 插入、富文本编辑器输出，或需容忍用户输入中的空白时，:empty失效是常态。这时更可靠的是把判断收口到 JS。
推荐用法：
-
element.childElementCount === 0：只看元素节点，忽略空格和注释，适合“真·无子元素”场景 -
element.textContent.trim() === ''：更严格，连纯文本空白都算“空”，但频繁调用会触发重排 - 动态更新时用
MutationObserver监听，别用已废弃的DOMNodeInserted - 避免全量遍历：只处理带特定 class 或 data 属性的容器，提升性能
服务端不渲染比前端补救更可靠
真正麻烦的不是怎么隐藏，而是“为什么会有这个空容器”。首屏闪现空容器体验很差，CSS 或 JS 补救都是事后补漏。
更优路径：
- 后端模板中提前判断：Nunjucks 用
{% if items %}，Jinja2 用{{ value|trim }} - Next.js / Nuxt 中在
getServerSideProps或asyncData里过滤掉空数组，不渲染对应容器 - 给容器加
data-empty属性：<div data-empty="true"></div>，再写[data-empty="true"] { display: none; }
复杂点在于“空”的定义本身模糊——DOM 树里的空、视觉上的空、业务逻辑里的空，三者常常不一致。先统一语义，再选技术方案，比硬套:empty省力得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
