:empty仅匹配无任何子节点（含文本、空格、换行、注释）且无伪元素内容的元素；它纯结构判断，不感知display:none或动态内容，无法替代JS视觉判空。
直接用 :empty 就行，但要注意它只匹配「完全没内容」的元素——连空格、换行、注释都不行。
什么是 :empty 认为的“空”？
:empty 只匹配那些既没有子节点（包括文本节点），也没有伪元素（如 ::before/::after）生成内容的元素。哪怕有一个空格或回车，就不是空。
- ✅
—— 匹配 - ❌
- ❌
- ❌
- ❌
+div::before { content: "" }—— 不匹配（伪元素生成了内容）
:empty 不能替代 JS 判断内容是否为空
它无法感知动态插入的内容变化，也不能识别 display: none 子元素是否隐藏了内容。比如：
div {
background: #eee;
}
div:empty {
background: red;
}
这段 HTML 中， 立即学习“前端免费学习笔记（深入）”； 比如按钮里只有 这个 真正要靠 实际上不为空（有子节点），所以 :empty 不生效 —— 即使那个 被隐藏了。
element.innerText.trim() === ''
:empty 是纯结构判断，和渲染无关常见误用：想给“无文字但有图标”的容器设样式
，没有文字，但你希望它变窄一点： 不是 :empty，因为 是子元素。这时候应该用属性选择器或类名区分：
button:has(svg):not(:has(span, p, [class*="text"]))（需浏览器支持 :has()）:empty，它真不适用:empty 的场景其实很窄：表单校验提示、动态列表项占位、服务端生成的纯骨架结构。用之前先 console.log(element.childNodes) 看一眼 DOM 树，比猜靠谱得多。
