:empty匹配不到“看起来空”的元素，是因为它仅当el.childNodes.length === 0时才匹配，而换行符、空格、注释等均生成#text或#comment节点，导致长度不为0；验证需用DevTools检查子节点或执行el.childNodes.length === 0。
:empty 匹配不到“看起来空”的元素，是因为它根本不看内容是否可视、是否可感知——它只认一个硬指标：el.childNodes.length === 0。只要 DOM 中存在哪怕一个 #text 节点（比如换行符 \n、空格 、制表符 \t）或 #comment 节点，就直接不匹配。
为什么 <div> </div> 不被 :empty 选中
HTML 解析器会把标签之间的所有空白字符（包括回车、缩进、空格）都转成 #text 节点。所以你写的：
<div> </div>
实际在 DOM 中是：<div> + 一个换行节点 + 一个空格节点 + </div>，childNodes.length 至少为 2。
- Vue/React 模板中
<div>{{ title }}</div>在title为空时，常保留前后空白文本节点 - 服务端模板（Jinja2、EJS）默认带缩进输出，
<td>{{ cell }}</td>渲染后可能变成<td>\n \n</td> -
<p></p>在多数浏览器中也不匹配，因为p元素会自动插入一个空#text子节点
怎么确认一个元素是否真被 :empty 匹配
别靠眼睛看源码，用 DevTools 直接验证：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中选中目标元素，展开内部 —— 如果看到
#text或#comment，就肯定不匹配 - 在 Console 中执行
el.childNodes.length === 0，只有返回true才算过关 - 在 Styles 面板里检查
div:empty规则是否高亮（说明当前命中） - 右键 → “Edit as HTML”，删掉标签内所有空白（包括回车），再观察是否生效
替代方案：当 :empty 失效时该用什么
一旦涉及模板渲染、CMS 输出或跨团队协作，DOM 中混入空白文本节点几乎是必然的。这时候硬扛 :empty，等于把问题留给运行时排查。
- 服务端或模板层提前判断字段是否为空，干脆不渲染该容器（最干净）
- 前端 JS 动态控制：
el.textContent.trim() === ''判断后加data-empty类，再写[data-empty]CSS - 现代浏览器可用
:not(:has(*))（忽略空白节点，只检测真实子元素），但需注意兼容性：Chrome 105+、Safari 15.4+、Edge 105+ - 别用
:blank——它虽语义更准，但仅 Safari 15.4+ 原生支持，Chrome 需手动开 flag，生产环境不可用
真正容易被忽略的是：哪怕你写了 div:empty { display: none; }，如果构建流程没压缩 HTML、模板引擎没 trim 空白、框架没禁用注释保留，那这条规则大概率全程静默失效。
