:empty仅匹配完全无子节点（含空格、换行、注释）的元素；视觉空白不等于DOM为空，需用childNodes.length验证或预处理HTML清除空白。
为什么 :empty 有时不匹配“看起来空”的元素
:empty 只匹配**完全不含任何子节点**的元素——包括文本节点（哪怕是一个空格、换行符）、注释、元素节点。常见误判是把“视觉上空白”等同于“DOM 中为空”。比如：
这个 div 实际包含一个换行符+缩进空格，属于文本节点，因此不满足 :empty。
实操建议：
– 检查 DOM 结构时用浏览器开发者工具的「Elements」面板右键 → 「Edit as HTML」，观察是否残留空白字符
– 预处理 HTML 时，若需确保空，可手动删掉标签间的换行与空格，或服务端/构建工具自动压缩 HTML
– 不要依赖肉眼判断，用 element.childNodes.length 在控制台验证：返回 0 才算真 :empty
:empty 和 :only-child 能否组合判断“唯一且为空的子元素”
可以组合，但语义是独立的：两者不会互相增强或限制条件。div:empty:only-child 匹配的是“既是空元素，又是其父元素的唯一子元素”的 div。它不表示“父元素只含一个空子元素”，而强调该 div 自身同时满足两个伪类。
常见错误场景：
– 父元素有多个子节点（如
），即使 p 是空的，也不满足 :only-child
– 父元素内有空格文本节点，则 p 不是 :only-child，哪怕它是唯一的标签元素
– 若想表达“父元素仅有一个子元素，且该子元素为空”，必须用 JS 辅助判断，CSS 无直接对应选择器
替代方案：用 :has() 判断父容器是否“只含一个空子元素”
:has()（现代浏览器支持，Chrome 105+、Safari 15.4+、Firefox 103+）能更贴近真实需求。例如：
div:has(> p:empty):not(:has(> *:not(p), > p:not(:empty)))
表示：该 div 有且仅有一个子元素，是 p，且该 p 为空。
