:empty对<div> </div>失效是因为它只匹配子节点数为0的真·空元素，而空格会生成#text节点使childNodes.length≠0；验证需用DevTools检查子节点或执行el.childNodes.length === 0。
为什么:empty对<div> </div>完全失效
:empty不是按“人眼看起来空”判断，而是严格检查 DOM 子节点数量。只要元素内部存在一个空格、换行符（\n）、制表符（\t）或 HTML 注释（<!-- -->），浏览器就会生成一个 #text 或 #comment 节点，导致 el.childNodes.length !== 0，直接不匹配。
常见误判场景包括：
- 模板引擎渲染时保留了前后空格：
<div class="title">{{ title }}</div>，当title为空字符串，实际输出为<div class="title"> </div> - HTML 缩进格式化后自动带换行：
<div>\n </div>→ 换行 + 空格 = 至少两个文本节点 - Vue/React 中插值周围有空白，或
<slot>fallback</slot>的fallback文本本身就是子节点
怎么确认一个元素是否真的被:empty匹配
别靠眼睛看 HTML 源码，用浏览器 DevTools 直接验证：
- 在 Elements 面板中选中目标元素，展开其内部 —— 如果看到
#text或#comment，就肯定不匹配 - 在 Console 中执行
el.childNodes.length === 0，返回true才算过关 - 在 Styles 面板里检查
div:empty规则是否高亮（说明当前命中）
注意：<p></p> 在多数浏览器中也不匹配，因为 p 元素默认会插入一个空文本节点。
立即学习“前端免费学习笔记（深入）”；
替代方案：当:empty失效时该用什么
如果目标是“视觉上为空就隐藏或加提示”，:empty 天然不合适。更可靠的路径是：
- 服务端或模板层提前判断字段是否为空，干脆不渲染该容器
- 前端 JS 动态控制：
el.textContent.trim() === ''判断后加data-empty类，再写[data-empty]CSS - 现代浏览器可用
div:not(:has(*))（忽略文本节点，只看元素子节点），但 Safari 15.4+、Chrome 105+ 才稳定支持 - 别用
:blank—— 它虽语义更准（忽略空白符），但仅 Chrome 120+ 实验性支持，且需手动开启 flag，生产环境不可用
:empty的适用边界在哪
它只适合那些你能 100% 控制 DOM 结构的极简场景，比如：
- 手写静态 HTML：
<td></td>、<p></p>（无缩进、无注释） - JS 显式清空后：
el.replaceChildren()或el.textContent = ''，再确保没后续插入空白 - Web Component 中用且明确不提供 fallback 内容
一旦涉及模板渲染、CMS 输出、用户输入或跨团队协作，DOM 中混入空白文本节点几乎是必然的——这时候还硬扛 :empty，等于把问题留给运行时排查。
