:empty伪类仅匹配dom中无任何子节点（含文本、注释、元素）的元素；因换行、空格、注释均生成#text或#comment节点，导致多数“视觉空”元素不匹配，验证需用el.childnodes.length === 0或devtools检查真实子节点结构。
:empty 伪类本身不“用来隐藏”，它只是匹配结构上真正空的元素；能否隐藏，取决于你给它加了什么样式（比如 display: none）——而它常被这么用，是因为它响应 DOM 结构变化，无需 JS 干预就能自动生效。
为什么 :empty 匹配不到你认为“空”的元素
浏览器把 HTML 中所有换行、空格、缩进都解析成 #text 节点。哪怕你写的是：
<div> </div>
实际 DOM 中就是 <div>\n</div>，中间那个 \n 就是文本节点，:empty 直接不认。
-
<div></div>→ 匹配（真·零子节点） -
<div> </div>→ 不匹配（空格是文本节点） -
<div><!-- comment --></div>→ 不匹配（注释是节点） -
<input>或<img>→ 永远不匹配（不是容器元素）
如何验证一个元素是否真的被 :empty 匹配
别靠眼睛看 HTML 源码，得看真实 DOM：
- 在 Chrome DevTools 的 Elements 面板里选中该元素，展开它——如果下面**没有任何子项**（连灰色
#text都没有），才可能命中 - 控制台执行
el.childNodes.length === 0，返回true才算过关 - Styles 面板中，
div:empty规则若高亮显示，说明当前确实匹配上了
:empty 在真实项目里怎么用才不至于翻车
它适合做“兜底”或“锦上添花”，但不能当主力逻辑来依赖：
- 手写静态 HTML 时可用：
.card-footer:empty { display: none; }，前提是模板没插空格 - 服务端渲染必须开启模板压缩（如 Nunjucks 的
trim_blocks），否则 SSR 输出的换行会破坏匹配 - React/Vue 中，避免
<div>{data || ''}</div>这种写法——空字符串仍会生成文本节点；改用条件渲染：{data && <div>{data}</div>} - 动态内容场景下，
:empty自动响应新增/删除子节点，比 JS 手动判断更及时；但它对textContent = ' '或innerHTML = ' '这类“视觉空但结构非空”的情况完全无感
真正麻烦的不是怎么写 :empty，而是你怎么让 DOM 变得“足够空”——多数时候，问题不在 CSS，而在 HTML 生成环节是否可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
