PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
:blank伪类仅匹配视觉上为空的元素，与窗口激活状态无关；它要求元素无子节点且textcontent.trim()为空，目前仅chromium 121+和safari 17.4+原生支持，firefox尚未实现。
别用 :blank 选“未激活窗口”——它根本不是干这个的
:blank 和窗口激活状态完全无关。它只判断元素内容是否“视觉上为空”，比如 <input> 里没输任何有效字符（连空格都不算），或 <div>\n\t </div> 这种纯空白。浏览器不会把焦点离开当前 tab 就当作“:blank”，也不存在“未激活窗口伪类”这种东西。想控制页面在失去焦点时的样式，得用 JS 监听 visibilitychange 或 blur 事件，再切 class。
:blank 实际支持情况：别信本地测试结果
目前只有 Chromium 121+（含 Edge 121+）和 Safari 17.4+ 原生支持 :blank；Firefox 仍无计划实现。Chrome 120 仅在 --enable-blink-features=CSSBlankPseudo 标志下可用，但该 flag 在稳定版默认关闭。常见错误是：你在 Canary 版看到 input:blank { opacity: 0.5; } 生效了，就以为上线能用——结果用户用正式版 Chrome 或 Firefox 打开时，样式完全不触发，且控制台零提示。
- 查兼容性必须看 caniuse.com/css-blank-pseudo，别依赖 MDN 的草案描述
- 服务端渲染或模板引擎（如 Nunjucks、EJS）插入的换行/缩进会生成文本节点，导致
:blank不匹配——它要求子节点数为 0 且textContent.trim()为空 -
:blank对<div><p></p></div>这类含空子元素的容器无效，它只作用于“自身无非空白内容”的元素
替代方案：用 JS 模拟 :blank 行为更可控
当需要兼容 Firefox 或旧版 Chrome，或者你得处理服务端注入的空白时，直接写 CSS 伪类反而容易翻车。推荐封装一个轻量函数：
function isTrulyBlank(el) {
return el.nodeType === Node.ELEMENT_NODE &&
el.childElementCount === 0 &&
el.textContent.trim() === '';
}
然后结合事件使用：
- 对表单控件，在
input和blur时调用，避免只依赖初始渲染 - 用
el.classList.toggle('is-blank', isTrulyBlank(el))而非操作style，方便复用 CSS 规则 - 别用
el.innerText.trim()——如果元素display: none或被父级隐藏，innerText返回空字符串，造成误判
真正要注意的边界：HTML 结构比 CSS 规则更容易破坏 :blank
最常被忽略的是 DOM 树本身。比如构建工具自动在 <div></div> 之间加了换行，或后端模板输出时带了空格，都会让 textContent 变成 "\n "，从而让 :blank 失效。DevTools 里看“Elements”面板可能显示干净，但右键 → “Edit as HTML” 或打印 el.textContent 才能看到真实内容。如果你的逻辑依赖“空即隐藏”，那必须从源头清理结构，而不是指望 CSS 自动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
