: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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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 = ''，但父容器里残留了换行符——这种细节，光靠伪类压不住。
