空状态语义优先用但需构成逻辑区块，孤立提示用
；必须添加role="status"或aria-live="polite"；JS控制节点挂载卸载，CSS用display:none隐藏，结构按图标→标题→说明→按钮顺序组织。
空状态用
还是
更轻量、更可控。滥用
role="status"
或
aria-live="polite"
，否则动态加载后提示不会被读屏软件识别
不要只靠颜色区分文字（如灰色字+小字号），至少叠加图标或明确定义
aria-label
避免把空状态写死在 HTML 里再用 JS 显示/隐藏——容易和 SSR 渲染冲突，应由 JS 控制整个节点的挂载与卸载
display: none
和
visibility: hidden
哪个更适合隐藏空状态？
用
display: none
。空状态不是“暂时不可见”，而是“当前上下文不存在该内容”，
visibility: hidden
仍占布局空间、仍可被聚焦、仍可能被键盘导航到，对键盘用户和读屏器都不友好。
如果空状态里有按钮（如“去添加”），确保它在
display: none
时完全脱离渲染流，不响应任何交互
切忌用
opacity: 0
+
pointer-events: none
模拟隐藏——它仍参与无障碍树，且动画过渡可能暴露闪现
在 CSS 中统一用类名控制显隐（如
.empty-state--hidden
），避免内联样式干扰 JS 状态管理
服务端返回空数组，前端怎么判断才不误判？
不能只看
data.length === 0
。后端可能返回
{ list: [] }
、
{ items: null }
、甚至
{ data: undefined }
。关键是要和接口约定一致，并在请求层做标准化处理。
接口文档没写清返回结构？先查响应体，用
console.log(response)
看真实值，再写判断逻辑
推荐在请求封装层统一 normalize：把各种空形态转成统一的
items: []
，空状态组件只认这个字段
特别注意分页接口：空数据 ≠
total === 0
，可能是
current_page > last_page
，此时应提示“已到底部”，而非“暂无内容”
图标 + 文字 + 操作按钮，DOM 结构怎么排最稳妥？
顺序必须是：图标 → 主标题 → 辅助说明文字 → 操作按钮。这是读屏器自然朗读顺序，也是视觉动线最顺的排列。用 Flex 布局时，别用
order
打乱 DOM 顺序。
图标用
aria-hidden="true"
；不要用字体图标（兼容性和语义都差）
主标题用
相关文章
- html个人页面怎么兼容旧浏览器_html兼容性写法【兼容】
- 安全高效地更新数据库数值：使用PHP预处理语句实现增量更新
- CSS自定义属性在大型项目中如何命名规范_参考BEM命名法的变量策略
- CSS自定义radio样式以及JS获取radio值的方法总结
- 为什么Tailwind CSS的按钮点击没有反馈_配置active伪类的缩放效果
- 在jQuery each 循环中为XML元素生成递增ID
- JavaScript 如何实现图片的轮播切换效果并加入淡入淡出动画？
- 使用 JSDOM 抓取网页时 NodeList 长度为 0 的问题及解决方案
- HTML中video封面图设置 HTML中video标签poster属性用法
- CSS如何实现表单必填项星号标识_使用::before伪元素插入内容