:empty 只匹配无任何子节点（包括文本、换行、空格、注释）的元素；常见失效原因是HTML含不可见字符，其判断严格且纯结构化，不依赖JS或运行时状态。
直接用 :empty 配合 display: none 就行，但必须注意：它只匹配「真·空」的元素——连换行、空格、注释都不行。
为什么 :empty 有时不生效？
常见错误是误判“空”的定义。HTML 中看似空白的标签，只要包含以下任一内容，:empty 就不会匹配：
- 一个换行符（
<div>\n</div>） - 一个空格（
<div> </div>） - HTML 注释（
<div><!-- comment --></div>） - 任何文本节点（哪怕只是不可见的零宽字符）
它只认严格意义上的「无子节点」——既无元素，也无文本。所以服务端模板或 CMS 输出带缩进的 HTML 时，:empty 很容易失效。
:empty 和 JavaScript 判断空内容的区别
JavaScript 可以调用 element.textContent.trim() === '' 做宽松判断，而 :empty 是纯 CSS 层面的结构匹配，不执行 JS、不触发重排，也不依赖运行时状态。
立即学习“前端免费学习笔记（深入）”；
- 优势：零 JS、无性能开销、天然响应 DOM 变化（比如 Vue/React 的 re-render 后自动生效）
- 劣势：无法处理「逻辑上为空」但结构上非空的情况（如仅含
<br>或<span></span>的容器） - 补救方案：若需兼容这类场景，得配合 JS 清理 DOM，或改用
:has()（但目前支持度有限）
实际写法与常见组合
不要单独写 :empty { display: none; }，这样会全局影响所有空元素，容易误伤。
- 限定作用范围：
.comment-body:empty { display: none; } - 避免破坏语义：对
<p>或<div>这类通用容器慎用，优先加 class 控制 - 注意继承干扰：如果父元素用了
display: flex或grid，隐藏子项后布局会自动重排，这是预期行为，不是 bug - 别和
visibility: hidden混用：:empty本身不控制可见性，只提供匹配条件
真正难的是「空」的定义边界
前端常默认“用户看不到就是空”，但 :empty 只认 DOM 结构。当 SSR 输出带空格的 HTML、或富文本编辑器插入不可见字符时，这个差异就会暴露。与其反复调试样式，不如在数据层就保证输出干净——比如后端模板里用 {% if content.strip %}...{% endif %}，比靠 CSS 补救更可靠。
