:empty仅匹配DOM中无任何子节点（含文本节点）的元素，换行、空格、注释均使其失效；它探测结构为空而非视觉为空，适用兜底样式或隐藏真正空容器，但不支持替换元素、contenteditable元素及:blank伪类。
:empty 只匹配子节点数为 0 的元素，不是“看起来空”，而是 DOM 层面真正一无所有——连换行、空格、<!-- 注释 --> 都会让它失效。直接写 div:empty { display: none; } 很容易白忙活，得先确认它真能选中。
为什么写了 :empty 却没生效？
最常出问题的地方不在 CSS 写法，而在 HTML 实际生成结果：
- 服务端模板（如 Jinja、Thymeleaf）默认保留缩进和换行 → 渲染出
<div>\n</div>，那个\n是文本节点，不匹配 - 前端 JS 清空内容时用了
el.textContent = ""，但没删掉残留的<script></script>或注释 - React/Vue 模板里写了
<div class="tags">{{ items }}</div>，哪怕items是空数组，编译后也可能插入空格或换行 - 开发者工具里 Elements 面板中能看到折叠的
#text节点，就说明不是空
:empty 能做什么？不能做什么？
它不是“视觉为空”的开关，而是“结构为空”的探测器：
- ✅ 适合做兜底样式：比如
td:empty::before { content: "—"; }，伪元素不依赖子节点，仍可渲染 - ✅ 适合隐藏无意义容器：
.hint:empty { display: none; }，前提是表单字段清空后 DOM 确实被清空 - ❌ 不能替代
:blank（该伪类至今无任何浏览器原生支持） - ❌ 不能用于含
contenteditable的元素，其内部会自动插入<br>或零宽空格 - ❌ 对
<input>、<img alt="HTML怎么用empty选择器_html CSS empty空元素选择器用法【参考】" >等替换元素无效（它们没有“子节点”概念）
当 :empty 失效时，有什么靠谱替代方案？
别硬扛，根据场景换策略：
立即学习“前端免费学习笔记（深入）”；
- 服务端可控：用
data-empty属性，比如<div class="list" data-empty="true"></div>，再写div[data-empty="true"] { display: none; } - 需要兼容老浏览器：JS 判断
element.textContent.trim() === '' && !element.querySelector('*')，然后加is-empty类 - 现代浏览器（Chrome 105+、Firefox 103+、Safari 16.4+）：改用
div:not(:has(*)):not(:has(text()))，比:empty更贴近“视觉空” - 若只是防布局塌陷，
min-height: 1em+background比display: none更稳，避免屏幕阅读器跳过或动画断裂
真正难的从来不是写对那行 :empty，而是确认你面对的 HTML 在 DOM 树里到底是不是空——这得靠开发者工具里看节点，而不是靠肉眼判断。
