:empty无法直接显示svg或png缺省图，因其仅匹配真·空容器，而content属性不支持插入图片，须用background-image配合min-height等样式才能渲染可见。
为什么:empty无法直接显示 SVG 或 PNG 缺省图？
因为 :empty 本身不控制内容来源，它只负责“匹配空容器”；而 ::before 和 ::after 的 content 属性只能插入文本、Unicode 字符或 attr() 值，**不支持直接插入外部图片文件**。所以写 content: url(placeholder.svg) 是无效的（浏览器会忽略）。
真正能显示图形的方式只有 background-image，但这里有个关键前提：空容器默认高度为 0，背景图根本渲染不出来。
- 必须显式设置
min-height或height，否则背景不可见 - 需搭配
background-size和background-position控制缩放与居中 -
background-color可作为 fallback 颜色，避免加载前纯白闪屏
:empty + background-image 的最小可行写法
假设你有一个动态填充的列表容器：
<div class="data-list"></div>
对应 CSS 必须同时满足三件事：匹配空状态、提供尺寸、显示图形：
.data-list:empty {
min-height: 200px;
background-image: url('placeholder.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: #f9f9f9;
}
- 不用
display: none，否则整个区域消失，用户看不到提示 - 慎用
background-size: cover——SVG 若无明确 viewBox 可能被裁剪 - 如果用 PNG，建议压缩为 2KB 以内，并考虑加 base64 内联减少请求
为什么 DOM 里有空格或换行符就失效？
:empty 的判定极其严格：只要元素内存在任何文本节点（包括一个空格、一个换行、一个 HTML 注释），它就不算“空”。常见陷阱有：
- 服务端模板（如 PHP/JSX）生成时自动插入了换行符：
<div class="data-list">\n</div> - Vue/React 的 v-for 或 map 渲染后残留空白节点
- HTML 格式化插件在空标签间插入空格
验证方式很简单：打开 DevTools，选中该元素，看 Elements 面板里它的子节点是否完全为空（连“#text”都没有）。修复方法只有两个：
- 服务端或构建时移除空白（如使用
html-minifier的collapseWhitespace） - 改用 JS 显式控制类名：
el.classList.toggle('is-empty', list.length === 0)，然后用.data-list.is-empty替代:empty
数据加载过程中如何避免闪烁或错位？
纯 CSS 方案在异步场景下天然有缺陷：初始 HTML 是空的 → 匹配 :empty → 显示缺省图；数据返回后 JS 插入内容 → 元素不再为空 → 缺省图瞬间消失。若插入过程慢或有 layout shift，用户会看到“图闪一下就没了”的异常。
更稳的做法是分阶段控制：
- 初始状态加 loading 类：
<div class="data-list is-loading"></div> - CSS 优先级覆盖：
.data-list.is-loading { background-image: url('loading.svg'); } - 数据加载完成且为空时，移除
is-loading，添加is-empty类 - 这样你能分别控制 loading / empty / loaded 三种状态，而不是依赖 DOM 是否“恰好为空”
真正难处理的不是怎么写样式，而是怎么定义“空”——服务端返回 []、null、{ data: [] } 还是 404，每种都需要前端做不同判断，CSS 本身对此毫无感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
