:empty仅匹配结构真空（无任何子节点）的元素，换行、空格、注释均生成#text或#comment节点导致不匹配；需服务端trim、JS replaceChildren或innerHTML.trim()确保真空，否则应改用JS宽松判断。
:empty 能隐藏空标签，但绝大多数你写的“空标签”其实根本不会被它匹配——不是 CSS 写错了，而是 DOM 里早就有看不见的文本节点了。
为什么写了 div:empty { display: none; } 却没效果
浏览器把 HTML 源码里的换行、空格、缩进、注释都解析成真实节点：#text 或 #comment。只要存在其中一个，:empty 就不触发：
-
<div></div>→ 匹配（零子节点） -
<div>\n</div>→ 不匹配（换行是#text） -
<div> </div>→ 不匹配（空格是#text） -
<div><!-- debug --></div>→ 不匹配（注释节点存在） -
<div>{{ data }}</div>（data为空）→ 渲染后常含空白#text，不匹配
在 Chrome DevTools 的 Elements 面板里展开该元素，只要看到任何 #text 节点，就说明 :empty 必定失效。
怎样让 :empty 真正起作用
关键不是补 CSS，而是控制输出源头，确保到达浏览器时 DOM 是「结构真空」：
立即学习“前端免费学习笔记（深入）”；
- 服务端模板（如 Jinja2、Nunjucks）开启
trim_blocks和lstrip_blocks，或对 HTML 字符串调用.trim() - JS 动态清空容器时，避免
el.textContent = ''（可能残留文本节点），改用el.replaceChildren()（现代浏览器）或while (el.firstChild) el.removeChild(el.firstChild)（兼容旧版） - 用
innerHTML注入前先.trim()：el.innerHTML = htmlStr.trim() || '' - 限定选择器范围，别写全局规则：
.card-footer:empty、.meta-item:empty{display: none;}
什么时候必须放弃 :empty，改用 JS
当 HTML 不可控、内容由框架/第三方 SDK 注入、或需容忍空格/换行时，:empty 失效是常态：
- 用
el.textContent.trim() === '' && el.children.length === 0做宽松判断（IE9+ 兼容） - 主动加属性而非 class：
el.toggleAttribute('data-empty', isEmpty)，CSS 写[data-empty] { display: none; } - 只在数据更新后执行一次：比如
fetch完成、Vueupdated钩子、ReactuseEffect中 - 避免全量遍历，只处理带
data-empty-check的容器
真正难的从来不是那行 div:empty { display: none; }，而是确保浏览器拿到的 DOM 里，那个 div 连一个看不见的字符都没带——这几乎永远是个生成环节的问题，不是样式层能解决的。
