:empty仅匹配完全不含任何子节点（含文本、元素、注释）的元素；空格、换行、注释、或<slot> fallback均导致不匹配，生产中需结合服务端trim或JS判断textContent.trim()===''来稳妥隐藏空容器。
什么时候 :empty 真的匹配成功
:empty 只匹配**完全不含子节点**的元素，包括文本节点、元素节点、注释节点——只要有一个，就不算空。
常见误判是认为“没写内容”就为空，但实际写了空格、换行、注释都会导致匹配失败。
- ✅
<div></div>—— 匹配 - ❌
<div> </div>—— 不匹配（含空格） - ❌
<div>\n</div>—— 不匹配（含换行符） - ❌
<div><!-- comment --></div>—— 不匹配（含注释） - ❌
<div><br></div>—— 不匹配（<br>是元素节点）
:empty 与 :blank 的区别在哪
:blank 是 CSS Selectors Level 4 提案中的伪类，目前仅 Chromium 120+（含 Edge 120+）通过 chrome://flags/#enable-css-blank-pseudo 启用，且默认不启用。它会忽略空白符（空格、制表、换行），只看“有意义的内容”。
-
:empty：严格，零节点才匹配 -
:blank：宽松，只含空白字符也匹配（但兼容性极差，生产环境慎用） - 当前无法用
:blank替代:empty实现“视觉上为空”的逻辑
想隐藏空容器？别只靠 :empty
单纯用 div:empty { display: none; } 很容易失效，尤其在服务端渲染或模板中插入了不可见字符时。更稳妥的做法是结合 JS 清理或服务端预处理：
- 服务端输出前 trim 内容，或统一用
<div class="maybe-empty"></div>标记 - 前端 JS 检查：
document.querySelectorAll('div').forEach(el => { if (!el.firstChild || el.textContent.trim() === '') { el.classList.add('is-empty'); } }); - CSS 配合：
.is-empty { display: none; } - 避免在动态内容（如 React/Vue 渲染后）直接依赖
:empty做样式控制
为什么 :empty 不能选中带空 <slot> 的 Web Component
Shadow DOM 中，<slot> 本身不是子节点，它的 fallback 内容才是。如果组件使用了 <slot>fallback</slot>，即使没传入内容，:empty 也不匹配宿主元素——因为 fallback 文本是子节点。
立即学习“前端免费学习笔记（深入）”；
-
<my-card></my-card>宿主元素若定义为<div><slot>default</slot></div>，则不为空 - 真正“空”的情况只能是：宿主元素内连
<slot>都没有，且无任何文本/元素 - Web Component 场景下，
:empty几乎不可靠，建议改用属性控制，例如<my-card empty></my-card>
实际项目里，:empty 最适合用于静态 HTML 或服务端完全可控的场景；一旦涉及模板引擎、富文本输入、Web Component 或 SSR/SSG 输出，就得提前验证 DOM 结构是否真的“空”，而不是假设它空。
