:empty仅匹配DOM中无任何子节点（含文本节点）的元素，换行、空格、注释均使其失效；它探测结构为空而非视觉为空，适用兜底样式或隐藏真正空容器，但不支持替换元素、contenteditable元素及:blank伪类。
:empty 只匹配子节点数为 0 的元素，不是“看起来空”，而是 DOM 层面真正一无所有——连换行、空格、 都会让它失效。直接写 div:empty { display: none; } 很容易白忙活，得先确认它真能选中。
为什么写了 :empty 却没生效？
最常出问题的地方不在 CSS 写法，而在 HTML 实际生成结果：
- 服务端模板（如 Jinja、Thymeleaf）默认保留缩进和换行 → 渲染出
\n是文本节点，不匹配 - 前端 JS 清空内容时用了
el.textContent = ""，但没删掉残留的<script></script>或注释 - React/Vue 模板里写了
，哪怕items是空数组，编译后也可能插入空格或换行 - 开发者工具里 Elements 面板中能看到折叠的
#text节点，就说明不是空
:empty 能做什么？不能做什么？
它不是“视觉为空”的开关，而是“结构为空”的探测器：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- ✅ 适合做兜底样式：比如
td:empty::before { content: "—"; }，伪元素不依赖子节点，仍可渲染 - ✅ 适合隐藏无意义容器：
.hint:empty { display: none; }，前提是表单字段清空后 DOM 确实被清空 - ❌ 不能替代
:blank（该伪类至今无任何浏览器原生支持） - ❌ 不能用于含
contenteditable的元素，其内部会自动插入 - ❌ 对
、
当 :empty 失效时，有什么靠谱替代方案？
别硬扛，根据场景换策略：
- 服务端可控：用
data-empty属性，比如，再写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 树里到底是不是空——这得靠开发者工具里看节点，而不是靠肉眼判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
