:blank 比 :empty 更适合检测“真·空”，因为 :empty 要求无任何子节点（含空白文本节点），而 :blank 忽略所有空白字符，仅当存在非空白内容才不匹配；目前仅 chromium 121+ 和 safari 17.4+ 支持，firefox 尚未实现。
为什么 :blank 比 :empty 更适合检测“真·空”
因为 :empty 只认字面空（连空白符都不容），而 :blank 会忽略所有空白字符（空格、换行、制表符），只保留有实际内容的元素才不匹配。它解决的是“用户看似没填，但其实输了个空格”的典型场景。
常见错误现象：:empty 在表单校验中误判——用户粘贴内容后删掉文字，却留下看不见的空格，:empty 不生效，导致提交逻辑出错。
-
:empty：仅当子节点数为 0 时匹配（不含文本节点，也不含空白文本节点） -
:blank：允许纯空白文本节点，只要没有非空白内容就匹配 - 兼容性：目前仅 Chromium 121+ 和 Safari 17.4+ 支持，Firefox 尚未实现
:blank 的实际写法和常见误用
不能直接写成 div:blank 就完事——它只作用于**无子元素且文本内容为空白**的元素，对带子标签的容器无效。比如 <div> </div> 匹配，但 <div><span></span></div> 不匹配，哪怕 <span></span> 是空的。
- 正确用法：
input:not(:blank)检测输入框是否“有实质内容” - 错误用法：
div:blank试图匹配含空<p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>的父容器（不会生效） - 注意：伪类不触发重排，但浏览器仍需遍历文本节点做空白判定，大量使用可能轻微影响性能
替代方案：当 :blank 不可用时怎么兜底
在 Firefox 或旧版 Chrome 中，得靠 JS 手动判断。核心是用 element.textContent.trim() === ''，而不是 innerHTML 或 innerText ——前者包含注释和标签，后者受样式影响。
- 推荐封装函数：
isTrulyBlank(el)，内部调用el.textContent.trim() - 避免用
el.innerText.trim()：如果元素被display: none，innerText返回空字符串，造成误判 - 表单监听建议：在
input和blur事件里检查，而非只依赖 CSS 伪类
CSS :blank 和 JS 判断结果不一致？查这三点
最常踩的坑是 HTML 结构干扰了伪类行为。比如服务端渲染时多了一个换行，或模板引擎自动插入空格，都可能导致 JS 认为空，但 CSS 不认。
- 检查元素是否含不可见 DOM 节点：用 DevTools 的「Show user agent shadow DOM」关掉，再看
textContent是否真为空白 - 确认是否用了
white-space: pre类样式——它会让空格变成“可见”，破坏:blank判定逻辑 - 动态插入内容后，CSS 伪类不会自动更新，需手动触发重绘（如改 class 或强制
offsetHeight）
真正麻烦的是混合渲染场景：服务端吐出带空格的 HTML，客户端 JS 清空后又用 textContent = ''，但父容器里残留了换行符——这种细节，光靠伪类压不住。
