:empty 仅匹配完全空白的元素，即无文本节点（含空格、换行）、无子元素、无注释；常见失效原因是 HTML 中存在隐式空白或注释；纯 CSS 无法处理此类情况，需用 JavaScript 结合 textContent.trim() 和 children.length 判断并添加 class 控制显示。
为什么 :empty 有时不生效？
直接写 div:empty { display: none; } 很可能没效果——:empty 只匹配**完全空白**的元素：不能有文本节点（包括空格、换行）、不能有子元素、也不能有注释。常见陷阱是 HTML 里写了换行或空格，比如：
<div> </div>
这个 <div> 实际包含一个换行符（文本节点），所以不被识别为 :empty。
- 确保 HTML 中标签紧贴书写：
<div></div>，而非跨行或带缩进 - 服务端渲染或模板引擎（如 Vue/React）可能注入空格或注释，此时
:empty失效 -
<div> </div>（含 ）或<div><!-- --></div>都不算空
替代方案：用 JavaScript 检测并标记真实空容器
当 HTML 不可控或需兼容注释/空格时，纯 CSS 无法解决。推荐用 JS 主动判断并加 class：
document.querySelectorAll('div').forEach(el => {
if (!el.textContent.trim() && el.children.length === 0) {
el.classList.add('is-empty');
}
});再配合 CSS：.is-empty { display: none; }
立即学习“前端免费学习笔记（深入）”；
-
textContent.trim()清掉首尾空格和换行，比innerHTML更可靠（不误判标签） - 必须同时检查
children.length === 0，否则<div><br></div>会被误判为空 - 若容器动态更新（如 AJAX 加载后），需在内容插入后重新运行该逻辑
注意 :empty 的边界行为
它对某些“看似空”的结构完全无感，容易误以为是 bug：
-
<div><span></span></div>：外层div不为空（有<span>子元素），即使<span>自身也为空 -
<div><img src="missing.jpg"></div>：哪怕图片加载失败，<img>元素仍存在，div不匹配:empty -
display: contents不影响:empty判定——判定发生在渲染前，只看 DOM 结构
性能与兼容性提醒
:empty 是 CSS Level 3 特性，IE 完全不支持；现代浏览器没问题，但要注意它触发的是**结构性伪类重算**，频繁 DOM 变动时可能带来轻微开销。
- 如果页面有大量待检测容器（>100 个），JS 方案建议用
MutationObserver替代轮询querySelectorAll - 不要把
:empty和:blank混淆：:blank是草案中的新伪类，目前仅 Safari 实验性支持，且语义不同（考虑空白文本） - 真正要隐藏“视觉上为空”的容器（如只含不可见元素），
:empty无能为力，必须靠 JS +getBoundingClientRect()或offsetHeight辅助判断
实际项目里，先确认你的“空”到底指什么：DOM 空，还是渲染后不可见？选错判定维度，后面所有样式都白调。
