:empty 真正匹配完全不含任何子节点（含文本、元素、注释）的元素，哪怕一个空格或换行符都不行；它只基于 DOM 结构，不看视觉效果。
什么是 :empty 真正匹配的元素
:empty 只匹配**完全不含子节点**的元素，包括文本节点、元素节点、注释节点——哪怕只有一个空格、换行符或 ，都不算空。
它不看 CSS 渲染效果，只看 DOM 结构。常见误解是以为“视觉上空白”就匹配，实际不是。
- ✅
匹配 - ❌
- ❌
- ❌
不匹配
:empty 无法处理含空格/换行的“伪空”元素怎么办
当 HTML 模板由服务端渲染或 Pug/Jinja 等模板引擎生成时，常因缩进产生不可见空白字符，导致 :empty 失效。此时需改用 JavaScript 主动判断：
function isVisuallyEmpty(el) {
return el.children.length === 0 &&
el.textContent.trim() === '';
}注意：textContent 会合并所有文本节点并保留空格，trim() 才能清除首尾空白；innerText 受 CSS 影响（如 display: none 文本不计入），不推荐用于逻辑判断。
用 :has() + :not(:empty) 做反向筛选要小心兼容性
有人想写 div:not(:empty) 来选“非空容器”，这本身没问题，但若嵌套使用 :has()（比如 section:has(div:not(:empty))），需注意：
Chrome 105+、Safari 15.4+ 支持，Firefox 仍部分不支持 :has() 中的伪类组合。
- ⚠️
div:has(*:not(:empty))在 Firefox 中可能完全不生效 - ✅ 更稳妥的 JS 替代：用
querySelectorAll('div').filter(el => !isVisuallyEmpty(el)) - ? 若仅需样式降级，可用
@supports selector(:has(*)) { ... }包裹新语法
服务端/构建时清理空白比前端补救更可靠
依赖运行时 JS 判断空状态，在 SSR 或 SEO 场景下有滞后性。更彻底的方式是在 HTML 产出阶段移除无意义空白：
- Webpack +
html-webpack-plugin：启用minify: { collapseWhitespace: true } - Vite：默认使用
html-minifier-terser，确保collapseWhitespace: true -
后端模板：Jinja 加
{%- ... -%}去掉前后空白，Pug 用pipeless text或unescaped控制
DOM 层面的“空”和模板层的“空”是两回事，别让一个空格毁掉整套基于 :empty 的样式逻辑。
