:empty伪类仅匹配无子节点的元素，因换行符等空白字符会生成文本节点而常失效；可靠方案是用:empty::before插入提示文字并设display:block，或用background显示图片并配min-height。
:empty 伪类本身不支持直接插入图片，但能配合 ::before 或 ::after 插入背景图或文字提示——前提是元素真为空。
为什么 :empty 常常“看起来没生效”
浏览器把换行、空格、制表符甚至模板引擎自动注入的空白都算作文本节点，:empty 就直接跳过。比如你写的是：
实际 DOM 中它含有换行符，.data-list:empty 根本不匹配。
- 用开发者工具检查 Elements 面板，看目标元素下是否出现
#text节点 - 服务端渲染时，确保输出为紧凑格式：
<ul class="data-list"></ul>，不要带缩进 - JS 清空列表后，别只删
li，还要调用el.textContent = ""或el.innerHTML = ""（后者更彻底，但注意残留零宽字符）
用 ::before 显示文字提示的可靠写法
这是最轻量、兼容性最好的方案，适用于 Chrome/Firefox/Safari/Edge（IE11 及以下不支持 ::before 在空元素上渲染，需降级）。
-
:empty::before必须配合display: block或inline-block才能显示内容 - 避免用
content: ""占位再靠背景图——content为空时伪元素不参与布局 - 示例：
.data-list:empty::before {
content: "暂无数据";
display: block;
text-align: center;
color: #999;
padding: 20px;
font-size: 14px;
}
注意：这个提示在用户输入或 JS 插入内容后会自动消失，无需手动控制显隐。
想显示 SVG 或 PNG 缺省图？别依赖 content，改用 background
content 只能插文本或 Unicode 图标，要显示图形必须走 background。但空容器默认高度为 0，图根本看不见。
- 必须设
min-height，否则背景图不可见 - 用
background-size: contain保比例，高清屏记得提供@2x或直接用 SVG - 无障碍问题：背景图无法被屏幕阅读器识别，如有必要，至少加一个
aria-label或隐藏文字节点
.data-list:empty {
min-height: 120px;
background: url("empty-state.svg") no-repeat center / 60px auto;
background-color: #f8f9fa;
}
当“空”不是结构空，而是内容为空字符串时怎么办
:empty 对 <div>""</div> 或 <div> </div> 完全无效——它只认 DOM 子树是否为空，不读取 textContent 或属性值。
- React/Vue 场景：别硬套
:empty，用v-if或{items.length ? ... : ...}更可控 - 原生 JS 场景：监听数据变更后，手动切换
is-empty类，CSS 改用.data-list.is-empty::before - 清空逻辑务必用
el.textContent = ""，避免innerHTML = ""残留\u200b等不可见字符导致判断失准
真正麻烦的从来不是怎么写 CSS，而是怎么让 DOM 在 JS 渲染后“看起来空，就真的空”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
