:empty仅匹配无任何子节点（含空格、换行、注释）的元素，常因dom中隐式插入内容而失效；需配合::before/after实现占位，或改用:not(:has(*))、js判空、data属性等兼容方案。
:empty 只能选中真正“一无所有”的元素——连空格、换行、注释都不行。它本身不生成占位，只是帮你精准定位，后续必须靠其他 CSS 属性补足视觉效果。
为什么 :empty 经常不生效
你以为是空的，DOM 其实早被悄悄塞了内容：
-
<div></div>✅ 匹配 -
<div> </div>❌ 含空格 → 生成 Text 节点 -
<div>\n</div>❌ 换行符也是 Text 节点 -
<div><!-- comment --></div>❌ 注释节点存在 -
<div><svg></svg></div>❌<svg></svg>是子元素，不是空
服务端模板缩进、IDE 自动换行、React/Vue 渲染时插入的空白，都可能让 :empty 失效。
:empty 配合伪元素实现占位文案
这是最常用且安全的占位方式——::before 或 ::after 在空元素内仍可渲染，且不受子节点干扰：
td:empty::before {
content: "—";
color: #999;
display: inline-block;
}
注意几点：
-
content必须写，否则伪元素不出现 - 若要垂直居中或撑开高度，加
display: inline-block或display: block -
td:empty不影响表格结构，不会破坏colspan/rowspan - 别对
div:empty { content: "..." }这样写——content在非伪元素上无效
用 :empty 隐藏空容器前先确认是否真需要隐藏
直接 display: none 可能引发布局跳变或无障碍问题：
- 表单提示区
.hint:empty { display: none; }合理，但得确保后端/JS 插入内容时 DOM 已就绪 - 列表项
.item:empty { height: 0; overflow: hidden; }比display: none更利于动画过渡 - 若容器有
padding或border，仅设display: none会让相邻元素突然上移——建议统一用min-height+ 背景色做视觉缓冲 - 屏幕阅读器可能跳过
display: none元素，若该空容器承载 aria-live 提示，就不能隐藏
当 :empty 不够用时，该换什么方案
“视觉为空” ≠ “结构为空”，遇到含空格、JS 动态填充、伪元素干扰等情况，:empty 就该让位：
- 现代浏览器可用
div:not(:has(*)):not(:has(text()))，但 Safari 15.4 以下、旧版 Edge 不支持 - 兼容方案：JS 检查
element.textContent.trim() === ''，然后加类is-empty，再用.list.is-empty控制样式 - 服务端渲染时，统一输出
<div class="list" data-empty="true"></div>，CSS 写div[data-empty="true"] - 最省事但最糙：放弃判空，直接给容器设
min-height: 40px; background: #f9f9f9;，保持视觉一致性
真正麻烦的是那些被零宽字符、aria-hidden、visibility: hidden 子元素“伪装”成空的容器——:empty 完全看不见它们，只能靠具体上下文逐个排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
