纯CSS步骤条通过data属性+伪元素实现，用counter-reset和::before生成序号，::after绘制进度线，data-current控制状态，配合无障碍属性确保可访问性。
用 CSS 实现纯静态步骤条，不依赖 JS 就能显示当前步
纯 CSS 步骤条适合流程固定、无需交互跳转的场景（比如表单提交后的结果页）。关键在于用 counter-reset 和 ::before 生成序号，再用背景色或边框区分“已完成”和“未完成”状态。
常见错误是直接给每个步骤写死颜色，导致后期增减步骤时要改一堆样式。正确做法是用 data-step 属性 + CSS 属性选择器控制状态：
<div class="stepper" data-current="2"> <div class="step" data-index="1">填写信息</div> <div class="step" data-index="2">确认订单</div> <div class="step" data-index="3">支付完成</div> </div>
然后用 CSS 匹配：
.stepper [data-index] {
position: relative;
}
.stepper [data-index]::before {
content: attr(data-index);
}
.stepper [data-index]::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 100%;
height: 2px;
background: #e0e0e0;
}
.stepper [data-index]::after {
transform: translateY(-50%);
}
.stepper [data-index][data-index="1"]::after { background: #4caf50; }
.stepper [data-index][data-index="2"]::after { background: #4caf50; }
.stepper [data-index][data-index="3"]::after { background: #e0e0e0; }- 进度线用
::after画在每个步骤右侧，最后一项不需要画线，可加:last-child::after { display: none; } - 颜色逻辑靠
data-current控制更灵活，但纯 CSS 无法动态计算“之前所有步”，所以建议用 JS 更新属性值后由 CSS 响应 - 移动端要注意
white-space: nowrap防止文字换行撑开步骤块
用 JavaScript 动态更新步骤状态，支持点击回退或 API 同步
当步骤状态来自接口返回或用户操作（如点击“上一步”），必须用 JS 控制 data-current 或 class。不要直接操作内联样式——它会覆盖 CSS 中的过渡动画。
立即学习“前端免费学习笔记（深入）”；
典型场景：用户完成第 2 步后，调用 updateStep(3) 进入下一步。函数里只做两件事：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给当前步骤容器设置
data-current="3" - 给对应
.step[data-index="3"]添加class="active"，同时移除其他.active
这样 CSS 可以统一用：
.step.active::before { background: #4caf50; color: white; }
.step.active ~ .step::before { background: #e0e0e0; color: #999; }
.step.active ~ .step::after { background: #e0e0e0; }注意：~ 是通用兄弟选择器，确保“后续步骤”样式被覆盖；如果用 +，只能影响紧邻下一个，不适用多步场景。
避免进度条在 Safari 上错位或动画卡顿
Safari 对 transform: translateX() 的子元素渲染有兼容问题，尤其配合 flex 布局时，步骤圆点容易偏移。最稳方案是放弃用 transform 控制进度线长度，改用 width + overflow: hidden。
- 把进度线抽成独立
<div class="progress-line">，放在步骤容器外层 - 用 JS 设置其
style.width = (currentStep - 1) / (totalSteps - 1) * 100 + '%'（首步为 0%，末步为 100%） - 给
.progress-line加transition: width 0.3s ease，Safari 支持良好 - 别对
::before或::after做 width 动画——伪元素不支持 transition
无障碍访问必须补上的三个细节
屏幕阅读器用户需要知道当前在哪一步、总共有几步、每步名称。光靠视觉样式远远不够。
- 每个
.step元素加上aria-current="step"（仅当前步）和aria-label="第 2 步：确认订单" - 整个步骤条容器加
role="navigation"和aria-label="订单流程步骤" - 禁用点击跳转时，给不可点击的步骤加
tabindex="-1"，防止键盘焦点落入无效区域
这些属性不改变样式，但能让 VoiceOver、NVDA 正确播报进度。漏掉任意一项，都可能让视障用户无法判断自己处在哪一环节。
