:empty仅匹配无任何子节点（含空格、换行）的元素；:blank才匹配视觉/语义为空，但仅chrome125+等部分支持；伪元素失效常因display:none或font-size:0；替代方案需服务端判断、js校验或css-in-js。
如何用 :empty 伪类准确匹配真正空的元素
:empty 只匹配**完全不包含任何子节点**的元素，包括文本节点（哪怕是一个空格、换行符都不行）。它不是“视觉上为空”或“内容为空字符串”的判断器。
常见误判场景：
- 写成
<div> </div>（含空格）→ 不匹配:empty - 写成
<div>\n</div>（含换行）→ 不匹配:empty - 写成
<div title="xxx"></div>（仅含属性）→ 匹配:empty - 写成
<div><span></span></div>（含空标签）→ 不匹配:empty（因为有子元素）
:empty 与 :blank 的关键区别在哪里
:blank 是 CSS Selectors Level 4 提案中的伪类，目前仅 Chromium 内核（Chrome 125+、Edge 125+）部分支持，且需启用实验性功能。它才真正匹配“视觉/语义上为空”的元素，比如只含空白字符、或仅含不可见元素（如 <br>、<input type="hidden">）。
当前实际可用方案：
立即学习“前端免费学习笔记（深入）”；
- 若需兼容 Safari/Firefox → 只能用
:empty，并确保 HTML 中无空白字符 - 若只跑 Chrome 最新版且可接受实验性行为 → 可试
:blank，但必须加@supports selector(:blank)守卫 - 服务端渲染时主动 trim 模板空白，或使用构建工具（如 Vite 插件）自动移除 DOM 中的空白文本节点
为什么 div:empty::before 有时不生效
根本原因：伪元素需要宿主元素在文档流中存在且可渲染。:empty 元素若本身 display: none 或父级 visibility: hidden，则 ::before 不会渲染；更隐蔽的是，某些 CSS 重置库（如 Normalize.css）可能给 :empty 元素设了 font-size: 0，导致 ::before 内容高度塌陷。
调试建议：
- 先确认元素是否真被
:empty匹配：用 DevTools 的“Styles”面板看是否高亮了该规则 - 检查计算后的
display值是否为none或contents - 显式设置
div:empty { display: block; }避免继承导致的不可见 -
::before必须带content值（哪怕是""），否则不触发渲染
替代方案：当 :empty 不够用时怎么办
前端无法靠纯 CSS 判断“内容为空字符串”，因为 CSS 不读取 textContent。真实项目中常用组合策略：
- 服务端 / 构建时：模板引擎（如 Jinja、EJS）输出前判断变量是否为空，动态加 class（如
is-empty） - JavaScript 补充：对目标元素执行
el.textContent.trim() === ""，再添加 class 或切换样式 - CSS-in-JS 方案（如 Emotion）：直接内联条件逻辑，避免 class 切换闪烁
- 表单场景可结合
:placeholder-shown+:not(:placeholder-shown)模拟“有值/无值”状态
真正棘手的永远不是选择器语法，而是 HTML 源码里那些看不见的空白字符和运行时动态插入的内容节奏。别指望一个伪类解决所有“空”的语义——它只回答一个非常窄的问题：这个元素节点树里，有没有哪怕一个子节点。
