:blank 伪类因未被主流浏览器支持而无法实际使用，它仅是 css selectors level 4 草案，chrome、firefox、safari 均不解析；当前唯一可靠方案是 :empty（需注意其对空白符敏感）或 js 模拟判定。
为什么 :blank 在实际项目里几乎用不了
因为主流浏览器（Chrome、Firefox、Safari）至今不支持 :blank 伪类——它只是 CSS Selectors Level 4 的一个草案提案，连实验性前缀都没进过任何稳定版引擎。你写 div:blank { display: none; }，浏览器直接忽略，控制台也不会报错，悄无声息地失效。
常见错误现象：开发时在本地 Edge（旧版）或某些 Chromium Canary 版本看到它“生效”，就误以为兼容了；上线后用户大面积出现空容器未隐藏，排查时才发现是伪类根本没被解析。
- 使用场景仅限于未来标准落地后的「严格空元素判定」，即内容为空白符（
\n\t等）+ 无子节点 + 无文本节点（包括空文本节点） - 它比
:empty更严：后者会把只含空白符的<div>\n </div>当作非空，而:blank会认为它是空的 - 目前所有 polyfill 都只能靠 JS 模拟，无法真正扩展 CSS 引擎行为
:empty 是当前唯一可用的空元素选择器，但要注意它的边界
:empty 虽然广泛支持（IE9+），但它对“空”的定义很窄：元素内必须**完全没有任何子节点**，包括文本节点。哪怕有一个空格、换行符、注释节点，都不匹配。
典型问题：模板渲染后，服务端或构建工具在标签间插入了换行，导致 <div>\n</div> 不被 :empty 选中。
立即学习“前端免费学习笔记（深入）”；
- HTML 中手动写的换行和缩进，会生成文本节点 → 破坏
:empty匹配 - JS 动态清空内容后，记得也移除可能残留的空白文本节点，或用
textContent = ''替代innerHTML = ''（后者不会清理注释节点） - 若需兼容注释节点，得用 JS 判断：
el.childElementCount === 0 && el.textContent.trim() === ''
用 JS 实现接近 :blank 行为的轻量方案
如果真需要判断“视觉上为空”（忽略空白符、注释、空文本节点），就得自己写逻辑。别用正则粗暴 trim，要走 DOM 树遍历。
示例函数：
function isBlank(el) {
if (el.childElementCount > 0) return false;
for (const node of el.childNodes) {
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') return false;
if (node.nodeType === Node.COMMENT_NODE) continue;
}
return true;
}
这个函数能覆盖大多数模板引擎（如 Handlebars、Vue SSR 输出）产生的“看似空实则含空白”的情况。
- 不要用
el.innerText === ''：它会触发重排，且受 CSSdisplay: none影响 - 若需频繁调用（如列表项批量判断），建议加 memo 缓存，键为
el引用 +el.innerHTML哈希（仅当内容动态变化时） - 注意 Shadow DOM 场景：默认不跨边界，需显式遍历
shadowRoot
真正该关注的：空状态是否该由 CSS 控制
很多团队试图用 :empty 或模拟 :blank 来隐藏空卡片、空列表项，但这类逻辑往往属于业务状态，不该耦合在样式层。
比如一个待办列表项，后端返回 { title: '', description: ' ' }，此时它“视觉为空”，但数据结构上不是空对象——CSS 无法感知字段语义。
- 更健壮的做法：在 JS 层根据业务规则判断是否渲染该 DOM 节点，而不是渲染后再靠 CSS 隐藏
- 如果必须保留 DOM（如动画过渡、SSR 一致性），那就用 data 属性标记：
<li data-state="empty">，再配[data-state="empty"]规则 - CSS 伪类适合处理“纯结构空”，比如用户删光了富文本编辑器内容后留下的空
<p></p>，这种才适合用:empty
伪类不是状态代理，它只认 DOM 结构。想靠它兜住业务空值，迟早掉坑里。
