:empty仅匹配无任何子节点（含空格、换行、注释等文本或注释节点）的元素；DOM中存在任意不可见节点即失效，需用textContent.trim()===''或MutationObserver等JS方案补足。
:empty 能选中“真·空”的容器，但绝大多数你写的 div 都不算——哪怕多一个换行符，它就失效了。
为什么 :empty 经常不匹配看起来空的容器
根本原因在于 DOM 中存在肉眼不可见的子节点。HTML 解析后，以下内容都会让 :empty 失效：
-
<div>\n</div>中的换行符 → 生成一个#text节点 -
<div> </div>中的空格 → 同样是#text节点 -
<div><!-- loading --></div>中的注释 →#comment节点 - Vue/React 渲染时自动插入的空文本节点（比如组件间换行）
验证是否真匹配：打开 DevTools → Elements 面板 → 找到该元素 → 看 Styles 标签页里 div:empty 规则是否高亮；或者运行 console.log(el.childNodes.length === 0)，只有返回 true 才算过关。
怎么写出能被 :empty 匹配的 HTML
关键不是“怎么写 CSS”，而是“怎么输出干净的 HTML”。服务端或构建阶段就得干预：
立即学习“前端免费学习笔记（深入）”；
- 模板引擎（如 Nunjucks、EJS）中用
{% if data %}...{% endif %}主动跳过空容器渲染 - Vite 项目加
vite-plugin-html，开启minify: true自动移除空白节点 - Next.js 中在
getServerSideProps或generateStaticParams里过滤空数组，不生成对应 DOM - 手写 HTML 时坚持写成
<div class="card"></div>这种单行紧凑格式，别换行缩进
注意：:empty 不吃 JS 动态清空后的“视觉空”——el.innerHTML = '' 后，若之前有换行残留，仍不匹配。
替代方案：当 :empty 不可靠时怎么办
纯 CSS 控制空状态太脆弱，尤其涉及动态内容时。更稳的做法是交由 JS 判断并打标记：
- 用
el.childElementCount === 0—— 只看元素节点，忽略空格/注释，适合“无子标签”场景 - 用
el.textContent.trim() === ''—— 更严格，连纯空白都算空，但频繁调用会触发重排 - 监听变化用
MutationObserver，别用已废弃的DOMNodeInserted - CSS-in-JS（如 Emotion）直接内联逻辑：
css`display: ${data?.length ? 'block' : 'none'};`
真正难的不是写 div:empty { display: none; }，而是确保浏览器拿到的 DOM 里，那个 div 连一个看不见的字符都没带。
