:empty 选不中看似“空”的元素，因为只要元素包含空白符（换行、缩进、空格）或注释以外的子节点（如<br>），就不是空；仅完全无子节点（含文本、元素、注释）才匹配。
为什么 :empty 选不中看似“空”的元素？
多数人写 div:empty { display: none; } 后发现没生效，根本原因是：只要元素里有空白符（换行、缩进、空格），它就不是 :empty。浏览器把换行和缩进当作 Text 节点处理，哪怕肉眼看不见。
比如这段 HTML：
<div> </div>
实际 DOM 中，<div> 内部包含一个换行符文本节点，所以 :empty 不匹配。
- 只有完全无子节点（包括文本节点、注释、元素）的元素才被
:empty选中 -
<span></span>✅ 匹配；<span> </span>❌ 不匹配（含空格） -
<p><br></p>❌ 不匹配（<br>是元素节点，非空）
想隐藏“视觉上为空”的元素，该用什么？
:empty 太严格，日常需要的是“内容不可见时隐藏”，得换思路。最稳妥的是 JavaScript + textContent.trim() 判断：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('div, p, span').forEach(el => {
if (!el.textContent.trim()) el.style.display = 'none';
});注意：textContent 不包含 HTML 标签，但会包含所有文本（包括 等实体解码后的空格）；trim() 能清除首尾空白，比正则更可靠。
- 不要用
innerHTML === ''—— 它漏掉<br>、<img>等无文本但占位的元素 - 若需保留响应式能力，可给元素加 class（如
js-empty），再用 CSS 控制.js-empty { display: none; } - 服务端渲染场景下，建议在输出前就过滤掉空内容，避免客户端 JS 补救
:empty 的真实适用场景有哪些？
它不是“隐藏空内容”的万能方案，而是适合明确控制“真·结构空”的情况，比如动态插入后未填充的容器。
- 表单中未加载选项的
select：当<select></select>初始无<option>时，可用select:empty { opacity: 0.5; }提示用户等待 - 列表项占位符：React/Vue 渲染列表时，若某项为
null或undefined，生成空<li></li>，此时li:empty { display: none; }可防止空白行 - 避免误用：不要指望它清理 CMS 输出的带空格 HTML —— 那些空格是模板引擎写的，必须从源头或 JS 层处理
兼容性与性能要注意什么？
:empty 在现代浏览器中支持良好（Chrome 1+、Firefox 4+、Safari 3.1+），IE9+ 也支持，但有个关键限制：不能用于伪元素（如 ::before:empty）—— 这种写法无效且会被忽略。
- 性能上没问题：CSS 引擎对
:empty的判断是常量时间，不影响重排重绘 - 但若大量使用（如上千个
div:empty），仍建议改用 class 控制，减少选择器匹配开销 - 真正容易被忽略的是：CSS 无法区分“空”和“仅含注释”，
<div><!-- comment --></div>仍算:empty—— 因为注释节点不计入子节点计数
