:empty伪类仅匹配无任何子节点（含空格、换行、注释）的元素，写法为div:empty{display:none}，不兼容IE8及更早版本；:blank更宽松但基本不可用；常见失效原因为隐藏的空白或注释节点。
空元素隐藏用 :empty 伪类最直接
只要元素里连空格、换行、注释都没有，:empty 就能精准匹配并隐藏。它不看 display 或 visibility，只看 DOM 子节点是否为零。
- 匹配条件极严：文本节点（哪怕一个空格）、子元素、注释都会让
:empty失效 - 写法简单：
div:empty { display: none; } - 注意它不支持 IE8 及更早版本，现代浏览器都 OK
:empty 和 :blank 的区别必须分清
:blank 是 CSS Selectors Level 4 提案，目前仅 Chromium 120+（含 Edge 120+）部分支持，且需开启实验标志；它会把纯空白（空格、制表符、换行）也视为空，比 :empty 宽松得多。
-
:empty：子节点数 === 0 → ✅ 匹配 -
:blank：子节点全为可折叠空白或无子节点 → ✅ 匹配（但当前基本不能用） - 别在生产环境写
div:blank { display: none; }，大概率无效
常见“看似空实则不空”的坑
模板渲染后常有看不见的干扰内容，导致 :empty 不生效，得手动清理或换思路。
- Vue/React 模板中写了换行或空格：
<div> <span v-if="false"></span> </div>
→ 实际含文本节点（换行符），:empty不匹配 - 服务端模板（如 Jinja2、EJS）插入了注释：
<div><!-- debug --></div>
→ 注释是节点，:empty失效 - 解决方案：用 JS 清空再判断，或改用属性控制：
div[data-empty="true"] { display: none; }
需要兼容空格/换行时，JS 配合更可靠
如果业务上“视觉为空”就该隐藏（比如用户没填内容，但输入框前后有空格），:empty 无能为力，得用脚本判断 textContent.trim() === ''。
立即学习“前端免费学习笔记（深入）”；
- 示例逻辑：
document.querySelectorAll('div').forEach(el => { if (!el.textContent.trim()) el.style.display = 'none'; }); - 注意避免重复执行；可用
MutationObserver监听动态内容变化 - 服务端渲染时，优先在输出前 trim 内容，比前端补救更干净
真正卡住的往往不是语法，而是 DOM 里那些看不见的换行、空格和注释——它们让 :empty 彻底失效，而你还在检查 CSS 选择器有没有写错。
