:empty 伪类仅匹配完全不含子节点（含空格、换行、注释等文本节点）的元素；其匹配基于 DOM 结构而非视觉表现，动态内容中易因残留节点失效，推荐用 JavaScript 结合 textContent.trim() 判断视觉为空。
什么是 :empty 伪类的真正匹配条件
:empty 只匹配**完全不含子节点**的元素——包括文本节点（哪怕是一个空格、换行符）、注释、元素节点。只要 HTML 源码里写了 <div></div>，它就匹配；但写成 <div> </div>（中间有空格）或 <div><!-- comment --></div>，它就不匹配。
常见误判：以为“视觉上空白”就等于 :empty，结果样式没生效。本质是 DOM 层面是否真的为空，不是渲染后是否可见。
为什么 :empty 对动态内容经常失效
JavaScript 插入内容后，哪怕清空了 innerHTML，也可能残留文本节点（比如 Vue/React 的模板编译、服务端渲染注入的换行）。此时 :empty 不再触发。
- 用
element.textContent = ''清空后，仍可能因父容器预设的换行符导致不匹配 - 框架组件（如 React 的
<div>{children}</div>）在children为null时，往往渲染出带换行的空标签 -
:empty无法响应 DOM 变化，它只在初始渲染或重排时计算一次，不监听后续变更
更可靠的替代方案：用 JavaScript 判断并加 class
当需要响应式隐藏“视觉为空”的节点时，:empty 不够用，直接用 JS 判断更可控：
立即学习“前端免费学习笔记（深入）”；
function isVisuallyEmpty(el) {
return !el.textContent.trim() && el.children.length === 0;
}
<p>// 应用到所有候选元素
document.querySelectorAll('.maybe-empty').forEach(el => {
el.classList.toggle('visually-empty', isVisuallyEmpty(el));
});然后在 CSS 中写：.visually-empty { display: none; }
- 用
textContent.trim()过滤空白字符，比检查innerHTML更轻量 - 避免用
offsetHeight === 0，它依赖布局、触发重排，且对visibility: hidden等无效 - 如果节点频繁变动，建议节流 + MutationObserver 监听，而不是每次修改都全量重查
兼容性与性能提醒
:empty 在 IE9+ 和所有现代浏览器中可用，但要注意它不支持伪元素（::before/::after）的内容参与判断——即使你用 content: ''，也不影响 :empty 匹配结果。
性能上，:empty 本身开销极小，但滥用会导致样式引擎反复回溯（尤其嵌套深、选择器复杂时）。例如 article > div:empty + p 就比 div:empty 更耗资源。
真正容易被忽略的是：服务端返回的 HTML 如果含不可见字符（比如 U+200B 零宽空格），:empty 会静默失败，且开发者工具里根本看不到——得用 el.firstChild?.nodeValue 手动检查原始值。
