如何用CSS制作无数据空状态页面？-css教程-PHP中文网

:empty伪类在真实项目中几乎无法稳定工作，因其判定标准过于严格（仅容许完全无子节点），而实际html常含换行、空格或注释；可靠方案是由js或服务端通过类名或属性明确标识空状态，css响应渲染。

如何用css制作无数据空状态页面？

:empty 伪类在真实项目中几乎无法稳定工作，别指望它自动撑起一个可用的空状态页面。真正能落地的方案，是让 JS 或服务端明确告诉 CSS “这里空了”，而不是让 CSS 去猜。

浏览器对 :empty 的判定是字面级的：只要元素内部存在任意文本节点（哪怕一个换行符 \n）、注释节点（）或空格，就不算“空”。而以下情况在真实项目中几乎必然出现：

服务端模板（EJS、Twig、Nunjucks）渲染后自带缩进和换行
Prettier 格式化会把 <ul></ul> 变成 <ul>\n</ul>，中间那个 \n 就是文本节点
Vue/React 中用 v-if 或 {list.length > 0 && <list></list>}，父容器 DOM 并未清空，只是子组件没挂载——但可能残留注释占位符或空白节点
手写 <div class="list"></div> 是唯一能匹配的形态，但你几乎不会这样写无格式 HTML

这是最常被复制粘贴的“纯 CSS 方案”，但它只在极窄条件下可用：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须确保服务端输出的 HTML 是紧凑格式，例如 <ul class="data-list"></ul>，不能有任何前后空白
::before 无法添加可交互内容（按钮、链接），因为伪元素不可聚焦、不可绑定事件
若容器是 display: flex 或 grid，::before 默认不参与布局，得手动加 align-self: center 或 justify-self: center
文案必须用 content 写死，无法动态读取数据或做 i18n；SSR 或 JS 禁用时才不会空白

放弃让 CSS 去“猜”是否为空，改由 JS 或服务端明确告诉 CSS：“这个容器现在是空的”。

JS 清空列表后，执行 el.classList.toggle("is-empty", list.length === 0)，而不是反复操作 innerHTML
用兄弟选择器避免样式耦合：<ul id="list"></ul> <div id="empty-tip" class="hidden">…</div>，再配 #list.is-empty + #empty-tip { display: block; }
服务端直出时，直接渲染 <ul data-empty="true"></ul>，CSS 写 ul[data-empty="true"] + .empty-tip { display: block; }
不要用 visibility: hidden 或 opacity: 0 模拟“空”——它们不改变 DOM 结构，:empty 依然不匹配，且影响可访问性

空状态不是孤立的提示框，它必须复用真实内容容器的语义标签与 class：

真实列表是 <ul class="order-list"></ul> → 空状态也得是 <ul class="order-list" aria-live="polite" aria-label="订单列表为空">暂无订单记录</ul>
真实结构是卡片网格 <div class="card-grid"></div> → 空状态也得是 <div class="card-grid" aria-live="polite">暂无内容</div>
所有 padding/margin/border 都来自原有 class，不另设 .empty 类控制布局
否则屏幕阅读器看到的是孤立 <div>，无法感知“这里本该是订单列表”，且 flex/grid 布局中盒模型错位会导致高度突变、列错位<p>空状态的关键不在“怎么显示”，而在“谁来定义空”——JS 或服务端给出明确信号，CSS 只负责响应；DOM、语义、样式、JS 状态四者必须对齐，否则任何视觉优化都是空中楼阁。</p> </div>