:empty只匹配完全无子节点的元素，空格、换行、注释均使其失效；视觉上为空需用JavaScript结合textContent.trim()判断并加类控制显示。
为什么 :empty 有时根本不起作用
因为 :empty 只匹配「完全不含任何子节点」的元素，哪怕里面有一个空格、换行符、注释，它就失效了。HTML 中常见的换行缩进、模板引擎生成的空白文本节点，都会让 div 看似“空”，实际不满足 :empty 条件。
- 浏览器会把 HTML 源码里的换行和缩进解析为
Text节点（哪怕只是\n） -
<div></div>是空的；<div>\n</div>不是空的 - Vue/React 渲染后若留有插值残留（如
{{ item }}未渲染时为空白字符串），也不算:empty
真正能用 :empty 隐藏的典型场景
只适用于你**完全可控 DOM 结构**的少数情况：服务端直出无缩进、JS 动态创建后未插入空白文本、或明确清空过 textContent 的元素。
- 服务端模板（如 EJS、Nunjucks）关闭空白压缩时慎用
- JS 创建元素后手动调用
el.textContent = ''，再加:empty才可靠 - 适合隐藏「占位用但尚未填充内容」的容器，比如：
<div class="card-body"></div>
示例 CSS：
.card-body:empty {
display: none;
}
更稳妥的替代方案：用 JS 检查并标记
想隐藏所有视觉上为空的元素（含空格、换行、纯空白字符），CSS 无解，必须 JS 干预。核心是用 textContent.trim() === '' 判断，再加 class 控制显示。
立即学习“前端免费学习笔记（深入）”；
- 避免遍历全部元素——只处理可能为空的容器，比如加
data-empty-check属性 - 注意性能：不要在
input或滚动中高频执行；首次加载或内容更新后调用一次即可 - 兼容性好，
trim()在 IE9+ 都支持
简短示例：
document.querySelectorAll('[data-empty-check]').forEach(el => {
if (!el.textContent.trim()) el.classList.add('is-visually-empty');
});
CSS 配套：
[data-empty-check].is-visually-empty {
display: none;
}
别忽略的边界情况
:empty 对 <img>、<input>、<br> 这类自闭合或无子节点元素无效，它们本就不含子节点，但浏览器不会认为它们“可被 :empty 匹配”——只有元素节点且无子节点才算。
-
<p></p>✅ 可匹配；<img>❌ 不匹配（不是容器元素） - 设置了
contenteditable的元素，即使看起来空，也可能有<br>光标占位符 - 使用
display: contents的子元素不参与布局，但会影响父元素是否为空的判断
真要全局清理，别指望一行 CSS 解决；得先定义清楚什么叫“空”——是 DOM 空，还是视觉空，还是业务逻辑空。这个区分没做对，后面全白搭。
