:empty选不到“看起来空”的容器是因为它要求元素子节点数为0，连换行符、空格、注释等文本节点都不允许存在；常见原因包括模板引擎残留空白、框架自动插入文本节点、HTML源码含\n或注释；验证需检查childNodes.length是否为0，替代方案需用JavaScript判断textContent.trim()。
为什么 :empty 经常选不到“看起来空”的容器
不是选择器写错了，而是 DOM 里根本没“空”——:empty 要求元素的 childNodes.length === 0，连一个换行、空格、注释或文本节点都不允许存在。常见失效原因包括：
- 模板引擎（如 EJS、Nunjucks）在
<div>{{ content }}</div>中留下的前后空白 - Vue/React 渲染后自动插入的文本节点（哪怕只是两个标签间的回车）
- HTML 源码里写了
<div>\n</div>，那个\n就是文本节点 - 元素内含
<!-- loading -->注释，注释也是子节点
验证是否真匹配：打开 DevTools → Elements 面板 → 点击目标元素 → 在 Styles 标签页看 div:empty 规则是否高亮；或者运行 console.log(el.childNodes.length)，只有返回 0 才算过关。
:empty 能用在哪些 HTML 标签上
所有常规块级/行内元素都支持，比如 <p>、<div>、<span>、<li>、<td>，但注意语义和实际效果：
-
<p></p>可被p:empty匹配，但<p> </p>（含空格）不行 -
<button></button>可匹配，但多数按钮默认有换行缩进，需压缩 HTML 或服务端 trim -
<input>、<img>等自闭合标签无法使用:empty（它们没有结束标签，也不接受子内容） -
<textarea>不适用 —— 它的内容是value属性，不是子节点，:empty对它无效
替代方案：当 DOM 控制不了时怎么模拟“空态”
前端无法干预服务端输出或框架默认行为时，纯 CSS 无解，必须引入 JS 或构建时处理：
立即学习“前端免费学习笔记（深入）”；
- 构建阶段用
vite-plugin-html（Vite）或html-webpack-plugin的minify选项移除空白节点 - 运行时监听内容变化：
el.classList.toggle('is-empty', !el.textContent.trim()) - 表单场景可退而求其次：
input:not(:placeholder-shown):valid判断是否填了值，或用textarea:placeholder-shown表示未输入 - CSS-in-JS（如 Emotion）直接内联逻辑：
css`display: ${data ? 'block' : 'none'};`
别指望 :empty 在现代框架中“开箱即用”，它只对完全手写、无缩进、无注释、无框架介入的 HTML 可靠。
:empty 的浏览器兼容性与性能影响
所有主流浏览器（Chrome、Firefox、Safari、Edge）均支持，仅 IE8 及更早版本不支持 —— 这点基本无需顾虑。性能方面几乎没有负担，因为它是 CSS 引擎在构建渲染树时一次性判断的静态条件，不触发重排或重绘。
真正难的从来不是写 div:empty { display: none; }，而是让那个 div 在浏览器里抵达时，里面连一个看不见的字符都没有。
