: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>是子元素节点
检查是否命中，直接打开开发者工具 Elements 面板，看目标元素下有没有展开的 #text 节点。
想判断“是否有子元素”，优先用 :has(*) 而不是 :not(:empty)
:has(*) 明确表达“存在任意子节点（含元素）”，语义清晰，且不被空白文本干扰；:not(:empty) 虽兼容性更好，但会把 <div> </div> 这类“仅含空格”的容器也当成“非空”，容易误判。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
div:has(*) { background: #f0f8ff; }→ 只要含至少一个子元素（如<p>、<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> 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 更沉默。
