:empty伪类仅匹配无任何子节点（含文本、注释、元素节点）的元素，换行、空格、注释均使其失效；需确保DOM结构纯净，否则应改用JS结合textContent.trim()判断并控制显隐。
:empty 伪类只匹配真正“空”的元素
:empty 不是判断内容是否为空字符串，而是看元素内部是否有任何子节点——包括文本节点、元素节点、注释节点。哪怕容器里有一个空格、换行符或 ，它就不再被 :empty 匹配。
常见错误是写成这样：
<div class="box"> </div>
表面看是空的，但换行符会被解析为文本节点，.box:empty 就不会生效。要让它生效，必须写成单行无空白：
-
<div class="box"></div>✅ -
<div class="box"><span></span></div>❌（有子元素） -
<div class="box"> </div>❌（空格是文本节点） -
<div class="box"><!-- comment --></div>❌（注释也是子节点）
用 :empty 隐藏空容器的正确写法
直接写 display: none 即可，但要注意它对布局的影响是彻底移除，不是视觉隐藏。
立即学习“前端免费学习笔记（深入）”；
.card:empty {
display: none;
}如果需要保留占位或仅视觉隐藏（比如配合 JS 动态填充），:empty 不适用，得换思路——例如用 JS 检查 element.innerText.trim() === '' && element.children.length === 0，再加 class 控制 visibility: hidden 或 opacity: 0。
另外注意：:empty 无法匹配含 <br> 的容器，因为 <br> 是元素节点；也无法匹配含 SVG <g> 但无实际图形的容器，只要存在子标签就算“非空”。
:empty 和 :blank 的关键区别
:blank 是 CSS Selectors Level 4 提案中的新伪类，目前仅 Chromium 117+（含 Edge 117+）支持，且需开启实验性功能标志。它比 :empty 更贴近语义上的“空”：忽略空白文本节点，只看是否有“有意义的内容”。
-
<div>\n \t</div>→:empty❌，:blank✅ -
<div><img src=""></div>→ 两者都 ❌（<img>是元素节点） -
<div> <span></span> </div>→:empty❌（有空格 +<span>），:blank❌（<span>存在）
生产环境别依赖 :blank，兼容性太窄；需要更宽松的“空判断”，还是交给 JS 处理更可控。
容易被忽略的 DOM 生成细节
服务端渲染或模板引擎（如 Vue/React SSR）输出 HTML 时，常因格式化缩进自动插入换行和空格，导致本该匹配 :empty 的容器失效。
- Vue 模板中避免换行：
<div class="list"><slot></slot></div>而不是分行写 - React 中用
children?.length === 0在组件内做判断，比依赖 CSS 更可靠 - 若用 innerHTML 动态插入，确保字符串不含首尾空白：
el.innerHTML = html.trim()
真正要靠 :empty 实现样式隔离，得从源头控制 HTML 结构的“纯净度”，而不是后期补 CSS 技巧。
