纯css可实现语义清晰、状态可控、响应式步骤条：用+counter自动编号，data-status统一控制三态样式与连接线颜色，flex布局等分节点并防文本撑开。
纯 CSS 就能做出语义清晰、状态可控、响应式友好的步骤条，不需要 JS 渲染结构，JS 只需切换 data-status 或 class 即可驱动样式变化。
用 <ol></ol> + counter 实现语义化自动编号
别用一堆 <div> 手写数字，既难维护又破坏可访问性。用有序列表天然支持顺序语义，配合 <code>counter 自动生成序号：
<ol class="steps"> <li data-status="done">登录</li> <li data-status="active">填写信息</li> <li data-status="todo">完成</li> </ol>- CSS 中用
counter-reset: step初始化计数器，每个li::before用content: counter(step)显示数字 - 序号样式（颜色、圆点、边框）全由
data-status控制，无需额外 DOM 节点
::before 画连接线时必须避开首节点
所有节点都加 ::before 会导致第一个节点左边多出一根线，而且绝对定位容易塌陷。正确做法是只作用于非首项：
-
.steps li:not(:first-child)::before—— 精准限定范围 -
position: absolute; top: 50%; left: -50%; transform: translateY(-50%)—— 让伪元素中心对齐当前节点左边缘，宽度设为100%才能刚好连到上一节点中心 - 连接线颜色由前一个节点的
data-status决定，比如li[data-status="done"] + li::before设为绿色
三态样式必须用属性选择器批量控制
用 class="step-done" 这类命名容易漏掉某一段线或某个图标状态；用 data-status 可统一收口：
-
li[data-status="done"] .step-dot→ 实心绿色圆点 + 对勾图标（\2713） -
li[data-status="active"] .step-dot→ 蓝色描边 + 数字居中 -
li[data-status="todo"] .step-dot→ 灰色空心圆 + 透明文字 - 连接线颜色不单独设，而是靠相邻兄弟选择器：
li[data-status="done"] + li::before→ 绿色；li[data-status="active"] + li::before→ 蓝色虚线
Flex 布局等分节点时别设固定 width
写死 width: 25% 在 3 步/5 步/响应式缩放时必然错位。Flex 天然适合等分，但有两个关键细节：
- 父容器用
display: flex; justify-content: space-between，子项不设 width，靠flex: 1均分剩余空间 - 必须加
min-width: 0防止长文本撑开节点（尤其在移动端），否则flex: 1失效 - 文字换行后高度不一致？统一用
align-items: center和line-height控制垂直居中，别依赖 padding 模拟
真正难的不是画线或变色，而是让每一步的「状态边界」在 DOM 和 CSS 里完全对齐——比如第 2 步 active 时，第 1 步必须 done、第 3 步必须 todo，且所有连接线颜色、圆点样式、序号可见性都要同步响应，漏掉任一 selector 组合，UI 就会露出逻辑裂痕。
