:empty 仅匹配子节点数为0的元素，空格、换行等会生成#text节点致其失效；:blank兼容性差不可用于生产；JS应使用textContent.trim()判断视觉为空。
:empty 在包含空格的容器中失效，是因为它根本不管“看起来空”，只认 DOM 子节点数是否为 0。只要容器里有一个空格、换行符、制表符或注释，浏览器就会生成一个 #text 节点或 Comment 节点，:empty 就立刻不匹配。
为什么 :empty 对 <div> </div> 无效
HTML 解析器会把空格、换行全部转成文本节点。哪怕你写的是 <div></div>，但模板引擎（如 Jinja、Vue SFC）或构建工具输出时带了缩进，实际 DOM 就变成 <div>\n </div>——那个 \n 和两个空格就是三个文本节点，:empty 直接放弃。
验证方法很简单：打开 DevTools → Elements 面板 → 展开该 <div>，如果底下能看到 <code>#text，就说明它不是空的。
-
console.log(el.childNodes.length === 0)返回false？那:empty不会生效 -
el.innerHTML === ''是错的判断方式，它忽略注释，且对含<script></script>的容器误判 -
el.innerText === ''不可靠，受 CSS 样式影响（比如display: none子元素不计入），还会触发重排
:blank 真的能替代 :empty 吗
不能。虽然 :blank 的设计目标是匹配“只含空白字符”的元素（比如 <div>\n \t</div>），但它目前仅 Safari 15.4+ 原生支持，Chrome 需手动开启实验标志（chrome://flags/#enable-css-blank-pseudo），Firefox 完全不支持。Can I Use 数据显示，2026 年 5 月全球桌面端支持率仍低于 40%，移动端更差。
立即学习“前端免费学习笔记（深入）”；
写了 div:blank { display: none; }，在绝大多数用户浏览器里等于没写——整条规则会被忽略，毫无降级逻辑。
- 别在生产环境用
:blank，连 fallback 都没法做 -
:empty兼容性极好（IE9+、所有现代浏览器），语义清晰，问题只出在 HTML 输出不干净 - 若真想用类
:blank的行为，必须靠 JS 实现，而不是寄希望于 CSS 新特性
用 JavaScript 判断“视觉上为空”的正确姿势
核心是：用 textContent + trim()，再排除干扰节点。不要试图用正则或 innerHTML 模糊匹配。
function isVisuallyEmpty(el) {
if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
// 过滤掉 script/style 标签内容（它们不该算作“可见内容”）
const temp = document.createElement('div');
temp.append(...el.childNodes);
const text = temp.textContent;
return text.trim() === '';
}
更轻量的常用写法（适用于无 <script></script>/<style></style> 的普通容器）：
el.textContent.trim() === ''
- 对富文本容器（如
contenteditable），需额外处理零宽字符：/[\u200B-\u200D\uFEFF]/.test(el.innerHTML) - 动态内容要监听变化：用
MutationObserver监听childList和characterData，比轮询高效得多 - React/Vue 中，优先在组件层控制显隐（如
{data && <div>{data}</div>}），而不是等 DOM 渲染完再用 CSS 补救
真正难的从来不是写对那行 CSS
而是确认你拿到的 HTML 在进入浏览器解析前，就已经被服务端或构建流程“压干净”了——没有换行、没有缩进、没有模板语法残留的空格。JS 判断可以兜底，但每次都要执行；:empty 零成本，却要求源头可控。多数线上项目翻车，不是因为不会写 :empty，而是后端吐出的 HTML 里藏着看不见的 #text 节点，而开发者只在 DevTools 里看“渲染结果”，没点开 DOM 树去数子节点。
