:empty伪类仅匹配无任何子节点（含空白符）的ul/ol，换行缩进会导致失效；动态渲染初始为空时可用，服务端输出带空白需压缩html或改用js判断；空li需js检测内容后加class处理。
怎么让空 <ul></ul> 或 <ol></ol> 显示提示文字
直接用 :empty 伪类加 ::before 插入内容是最轻量的方案，但得小心它对“空”的定义——只要子元素里有空白符（比如换行、缩进），:empty 就不匹配。
-
:empty只认完全没子节点（包括文本节点）的元素，<ul>\n</ul>这种带换行的不算空 - 如果列表由 JS 动态渲染，初始 HTML 是空标签，那
:empty::before能立刻生效；但若服务端已输出带空格的标签，就得先清理 HTML 或改用 JS 检测 - 提示文字建议用
content写死，别依赖 JS 注入，否则 SSR 或禁用 JS 时会丢失
ul:empty::before {
content: "暂无数据";
display: block;
color: #999;
text-align: center;
padding: 16px 0;
}
为什么 :empty 不生效？常见失效场景
不是 CSS 写错了，大概率是 HTML 结构“看起来空，实际不空”。浏览器把换行、制表符、空格都算作文本节点，:empty 就直接跳过。
- 模板引擎（如 EJS、Twig）自动加的换行会让
<ul>{{ items }}</ul>在items为空时仍含空白文本节点 - Vue/React 中用
v-if或条件渲染控制整个列表存在性，比依赖:empty更可靠 - 如果必须用
:empty，构建时用 HTML 压缩工具（如 html-minifier）移除空白，或手写成<ul></ul>紧凑格式
用背景图替代文字提示的注意事项
纯背景图方案适合设计要求统一、文字不可编辑的场景，但可访问性和灵活性会打折扣。
- 背景图需配合
min-height，否则空列表高度为 0，图根本看不见 - 不能被屏幕阅读器识别，对无障碍不友好；如有必要，至少补一个
aria-label或隐藏文字节点 - 高清屏下记得提供
@2x图或用 SVG，避免模糊；CSS 中用background-size: contain保比例
ul:empty {
min-height: 120px;
background: url("empty-state.svg") no-repeat center / 60px auto;
background-color: #f8f9fa;
}
当列表内容是 <li> 但可能为空字符串时怎么办
:empty 对这种“非空标签但内容为空”的情况完全无效——<li> 或 <li> </li> 都不算空元素。
- 得靠 JS 判断：遍历
li，检查textContent.trim() === ""，然后给父级加 class 如is-empty - CSS 里写
ul.is-empty::before，和前面一样处理 - 如果用 React，更推荐在组件层判断
items.length === 0直接渲染提示，而不是塞一堆空<li>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
