:empty只匹配完全不含任何子节点（包括文本、元素、注释）的元素，哪怕一个空格或换行符都会导致不匹配；它仅能用于样式选择，不能修改dom内容。
为什么 :empty 选不到“看起来空”的元素
:empty 只匹配**完全不含子节点（包括文本节点、元素节点、注释节点）的元素**。哪怕有一个空格、换行符或 HTML 注释，它就不是空的。
常见误判场景：
- 写成
<div></div>→ ✅ 匹配:empty - 写成
<div> </div>（含空格）→ ❌ 不匹配 - 写成
<div>n</div>（含换行）→ ❌ 不匹配 - 写成
<div><!-- comment --></div>→ ❌ 不匹配
浏览器会把源码中的空白字符解析为真实存在的 Text 节点，所以 DOM 层面它就不“空”。
:empty 能做什么不能做什么
它只能用于**选择 + 应用样式**，比如隐藏、变色、加边框等，但不能“清空内容”——伪类没有修改 DOM 的能力。
立即学习“前端免费学习笔记（深入）”；
典型用途：
-
div:empty { display: none; }—— 隐藏服务端未渲染内容的占位<div></div> -
td:empty { background: #eee; }—— 标记表格中缺失数据的单元格 -
p:empty::before { content: "（无正文）"; }—— 插入提示文案（注意：::before在空元素里仍可渲染）
不能做的事：:empty { content: ""; } 无效，content 只在 ::before/::after 中合法，且不会影响原元素内容。
想“清空内容”，该用什么替代 :empty
如果目标是让某个区域“视觉上为空”或“移除内容”，得靠 JavaScript 或服务端逻辑，css 本身不提供清空能力。
可行方案：
- 用 js 清空：
el.textContent = ""或el.innerHTML = ""（注意 xss 风险） - 用属性控制显示：
<div data-status="empty">xxx</div>，再写div[data-status="empty"] { display: none; } - 服务端避免输出冗余空标签，比前端补救更可靠
别试图用 :empty 做内容清理，它只是个观察者，不是执行者。
兼容性与现代替代思路
:empty 在所有现代浏览器中支持良好（IE9+），但要注意它无法检测动态清空后的状态变化——比如 JS 执行 el.innerHTML = "" 后，:empty 会立即生效；但若清空的是 textNode 内容而保留空白字符，它依然不触发。
更灵活的现代做法：
- 用
:has()配合内容检测（如div:has(*)表示“有子元素”，但注意:has()尚不支持所有场景，且无法检测纯文本） - 结合 CSS 自定义属性 + JS 控制，例如设置
style="--is-empty: 1"，再用div[style*="--is-empty: 1"]选中（不推荐，维护性差）
真正关键的，是厘清“空”的定义：DOM 空？视觉空？业务语义空？不同场景得用不同手段，别指望一个伪类包打天下。