:empty伪类仅匹配完全无子节点的元素，对空格、换行、注释等敏感；实际开发应优先用js清理内容或改用:not(:has(*))替代，:blank尚属实验性不可用于生产。
:empty 伪类确实能自动隐藏“真正空”的容器，但它对空格、换行、注释极其敏感——多数你以为的“空”其实不空，直接用会失效。
为什么 :empty 没生效？常见“假空”陷阱
浏览器判定 :empty 的标准非常严格：元素内必须**完全没有任何子节点**（包括文本节点）。哪怕有一个空格、一次回车、一段 HTML 注释，都不算空。
- ❌
<div> </div>（含空格）→ 不匹配 - ❌
<div><!-- comment --></div>→ 不匹配 - ❌
<div><br></div>→ 不匹配（<br>是元素节点） - ✅
<div></div>→ 匹配
如何安全使用 :empty 隐藏容器
实际开发中，不能依赖模板生成“绝对干净”的 HTML。更可靠的做法是结合 JS 清理 + CSS 控制，或改用更宽松的逻辑。
- 如果内容由 JS 动态插入，插入前先
el.textContent = ''再判断长度，比依赖:empty更可控 - 若必须纯 CSS，可配合
:has()做降级（如div:has(*)表示“有子元素”，再用:not()取反），但注意:has()在旧版 Safari 中不支持 - 简单场景下，用
div:not(:has(*))替代div:empty更鲁棒（它忽略文本节点，只看元素子节点）
:empty 和 :blank 的区别与现状
:blank 是草案中的新伪类，语义上更符合直觉（忽略空白符后为空即匹配），但目前仅 Chrome 120+ 实验性支持，且需开启 flag，不可用于生产环境。
-
:empty：匹配无任何子节点（文本/元素/注释全无） -
:blank（实验性）：匹配“渲染后视觉为空”，会忽略空白符和换行 - 别在项目里写
div:blank { display: none; }—— 现阶段等于没写
真正要让“看起来空”的容器消失，得先确认它是不是真空；如果不是，:empty 就不是解法，得从数据层或 JS 层清理内容，或者换用属性控制（比如加 data-empty 类）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
