:empty伪类仅匹配零子节点的绝对空元素，空格、换行、注释均使其失效；需用el.textcontent.trim() === ''等js方案判断视觉为空，并配合class控制样式。

:empty 伪类只认“绝对空”，不是“看起来空”——只要容器里有哪怕一个空格、换行、注释，它就失效。别指望它自动隐藏用户没填内容的表单区域或富文本留白。

为什么 div:empty { display: none; } 经常不生效

浏览器把 HTML 中的空白符（空格、换行、缩进）解析为 #text 节点，而 :empty 要求**零子节点**：既不能有元素，也不能有文本，更不能有注释。

• <div></div> → ✅ 匹配
• <div> </div> → ❌ 含空格文本节点
• <div>\n</div> → ❌ 含换行符文本节点
• <div><!-- comment --></div> → ❌ 含注释节点
• <div><p></p></div> → ❌ <p></p> 是子元素节点

检查是否命中，直接打开开发者工具 Elements 面板，看目标元素下有没有展开的 #text 节点。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

想判断“是否有子元素”，优先用 :has(*) 而不是 :not(:empty)

:has(*) 明确表达“存在任意子节点（含元素）”，语义清晰，且不被空白文本干扰；:not(:empty) 虽兼容性更好，但会把 <div> </div> 这类“仅含空格”的容器也当成“非空”，容易误判。

• div:has(*) { background: #f0f8ff; } → 只要含至少一个子元素（如 <p></p>、<span></span>），就生效
• div:has(> img) { padding: 1rem; } → 仅当直接子节点是 <img> 时触发
• :has() 在 Safari 15.4+、Chrome 105+、Firefox 121+ 稳定支持；Edge 全版本可用
• 注意：:has() 不能用于选择器开头（如不能写 :has(div) .item），也不能链在 :empty 后（:empty:has(*) 语法非法）

Web Component 或模板渲染中，:empty 几乎不可靠

Shadow DOM 里的 <slot></slot> fallback 内容（比如 <slot>default</slot>）会被视为宿主元素的子节点，导致 :empty 永远不匹配——哪怕你没传任何内容。

• Vue/React 渲染后插入的空格、服务端模板（如 Jinja、EJS）自动注入的换行，都会让 :empty 失效
• 更可控的做法是：服务端输出前对内容做 trim()，或前端用 JS 判断并加 class：el.textContent.trim() === ''
• 对于自定义组件，改用属性控制更稳妥，例如：<my-card empty></my-card>，再写 my-card[empty] { display: none; }

视觉上“空”但结构上不空？别硬刚 :empty

CSS 本身无法区分“全是空格”和“真有文字”，:empty 和实验性 :blank（仅 Chromium 120+ 实验开启）都不适合生产环境处理这类逻辑。

• :blank 虽能忽略空白符，但默认禁用、无 Safari 支持、无法 polyfill
• 需要响应“用户未输入”场景时，必须用 JS：el.innerText.trim() === '' 或 el.textContent.replace(/\s/g, '').length === 0
• 伪元素（::before/::after）不影响 :empty 判断——这点常被误认为“加了 content 就不算空”，其实它们不在 DOM 树中

真正难的从来不是写对一行 :empty，而是确保 DOM 结构如你所想——尤其在跨框架、跨渲染层协作时，空格和换行比 bug 更沉默。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！