1. 设计目标与实现要点
1.1 需求定义
在本完整教程中，核心点是通过 CSS 计数器驱动的步骤导航，实现对多步骤流程的顺序编号与状态指示。目标是保留简洁的 HTML 结构，同时通过 CSS 控制样式与互动，提升可维护性与可访问性。
通过使用计数器，我们可以在不改变语义的情况下，统一呈现步骤编号、圆点徽标以及进度反馈，从而让用户清晰地理解当前进度。
本段内容强调：将设计聚焦于步骤的清晰呈现、可延展性以及对各种设备的适配，确保在不同分辨率下仍具备一致的视觉层级。
1.2 视觉表现与无障碍
可访问性是实现步骤导航时的重要考量点，确保屏幕阅读器能够正确解析步骤顺序并且焦点可见。
在视觉上，应该提供高对比度、可辨别的活动状态、以及友好的焦点风格，以便所有用户都能快速识别当前步骤。
通过使用 CSS 计数器，我们可以实现一致的编号样式与易于自定义的主题，从而在保持语义就绪的同时增强美观性。
2. CSS 计数器的工作原理
2.1 计数器相关属性
CSS 计数器依赖两个核心属性：counter-reset、counter-increment，以及用于显示编号的 content: counter(name)（或 counters()）函数。
通过对容器设置 counter-reset，再在每个项上应用 counter-increment，就能逐步自增编号。这种机制让编号完全由样式控制，HTML 结构保持简单。
2.2 伪元素的巧用
伪元素 ::before（或 ::after）常用于在步骤前插入数字、圆点或图标，以实现自定义的视觉编号。
结合 li 的定位与圆形背景，可以轻松构建环形或方形的数字标签，呈现出直观的步骤序列感。
2.3 结构与性能的平衡
在实现过程中应注意：保持结构清晰、避免复杂嵌套，以减少渲染成本；尽量使用现代浏览器对计数器的原生支持，以实现更好的性能与一致性。
此外，若需要多级步骤导航，可结合多层级容器与嵌套计数器，但需确保可读性和可维护性不被降低。
3. 实现步骤导航的HTML结构
3.1 结构语义与无障碍
推荐使用有序列表 ol 作为语义容器，因为它天然表示步骤顺序，便于屏幕阅读器的线性读取。每个步骤项使用 ，并可在需要时对当前项应用 aria-current 属性进行标记。
通过在容器上添加 aria-label，可以清晰描述该导航的功能，提升可访问性。
结合计数器的实现，HTML 结构仍保持简洁，只需对样式进行替换和增强即可。
<nav aria-label="步骤导航"><ol class="steps" aria-label="步骤列表"><li><a href="#step-1">第一步：选择产品</a></li><li><a href="#step-2">第二步：填写信息</a></li><li><a href="#step-3">第三步：确认与提交</a></li><li><a href="#step-4">第四步：完成</a></li></ol>
</nav>
3.2 可交互性与可点击区域
为提升交互性，可以在每个步骤项中放置一个 链接 或 按钮，以便用户直接跳转到对应步骤；同时对当前步骤应用 aria-current="step"，明确标识当前进度。
下面是一个简化的交互结构示例，帮助理解如何在实际项目中落地：
<ol class="steps" aria-label="步骤列表"><li aria-current="step"><a href="#step-1">第一步：选择产品</a></li><li><a href="#step-2">第二步：填写信息</a></li><li><a href="#step-3">第三步：确认与提交</a></li>
</ol>
4. 关键CSS实现：计数器与步进效果
4.1 计数器的基本用法
要启用计数器，需要对容器执行 counter-reset，对每个步骤项执行 counter-increment，并在伪元素中应用 content: counter(name)。
这套思路使编号完全来自样式，HTML 结构不依赖具体数字，便于后续风格切换。
/* 4.1 计数器的基础设置 */
ol.steps {counter-reset: step;list-style: none;padding: 0;display: flex;gap: 1rem;
}
ol.steps > li {counter-increment: step;position: relative;padding-left: 2.5em;
}
ol.steps > li::before {content: counter(step);position: absolute;left: 0;top: 0;width: 1.8em;height: 1.8em;display: inline-grid;place-items: center;border-radius: 50%;background: #e5e5e5;color: #333;font-weight: bold;
}
4.2 使用 ::before/::after 显示编号
通过对 ::before 的样式定制，可以把数字与圆形、方形边框、渐变等视觉元素结合，形成统一且美观的步骤标签。可自定义颜色、尺寸与间距，以适配不同主题。
/* 4.2 显示风格扩展 */
ol.steps > li::before {width: 2.2em;height: 2.2em;border-radius: 50%;background: linear-gradient(135deg, #4f9cff 0%, #2c7be5 100%);color: #fff;font-weight: 700;
}
4.3 动态状态与进度反馈
为当前步骤应用 aria-current="step" 或 CSS 类（如 .active），并给出清晰的视觉反馈，例如颜色反转、圆圈填充或边框强调。
示例中的状态样式有助于实现“步骤已完成/现在进行/待处理”的可视化分层，提升可用性与可读性。
/* 4.3 当前步骤的视觉反馈 */
ol.steps > li[aria-current="step"] {background: #2c7be5;color: #fff;border-radius: .5rem;padding: .25rem .6rem;
}
ol.steps > li[aria-current="step"]::before {background: #fff;color: #2c7be5;border: 2px solid #2c7be5;
}
5. 响应式与跨浏览器兼容性
5.1 响应式布局与无障碍
在不同屏幕上，步骤导航需要保持清晰且易于交互。通过 媒体查询 调整排布方式，例如横向并列在大屏幕、竖向堆叠在小屏幕上，从而确保 触控友好与键盘导航的一致性。
无障碍方面，aria-label、aria-current 与焦点样式的综合应用，能显著提升辅助技术用户的体验。
5.2 兼容性与降级策略
现代浏览器对 CSS 计数器有良好支持，但在极旧环境中，仍需确保默认样式不会导致不可用的文本信息。因此，提供简化样式或备用文本，以避免功能丢失。
在实践中，优先使用不依赖过度特性的方法实现降级兼容，同时保持主视觉效果的一致性。
6. 实战模板与可复用性
6.1 代码结构与模块化
为了提升复用性，建议把步骤导航封装为独立模块，将样式与结构分离，方便在不同页面中重复使用。
通过引入 CSS 变量，可以实现快速主题切换和全局风格调整，减少重复修改的工作量。
/* 6.1 可复用的样式变量示例 */
:root {--step-gap: 1.25rem;--step-size: 2.0rem;--step-bg: #e5e5e5;--step-active-bg: #2c7be5;--step-text: #333;
}
ol.steps {counter-reset: step;list-style: none;display: flex;gap: var(--step-gap);padding: 0;
}
ol.steps > li {counter-increment: step;position: relative;padding-left: calc(var(--step-size) + 0.5em);color: var(--step-text);
}
ol.steps > li::before {content: counter(step);position: absolute;left: 0;width: var(--step-size);height: var(--step-size);border-radius: 50%;display: grid;place-items: center;background: var(--step-bg);color: #000;
}
ol.steps > li[aria-current="step"] {background: var(--step-active-bg);color: #fff;padding: .25rem .6rem;border-radius: .5rem;
}
6.2 预处理器与可扩展性
在大型项目中，结合预处理器（如 SCSS）可以进一步提高可维护性与扩展性。例如，使用变量、混入和嵌套结构来统一风格，以便实现跨组件的一致性。
// 6.2 通过 SCSS 提升扩展性
$step-color: #2c7be5;
$step-bg: #e5e5e5;$steps: ('第一步：选择产品','第二步：填写信息','第三步：确认提交','第四步：完成'
);@mixin steps {counter-reset: step;list-style: none;display: flex;gap: 1rem;
}
ol.steps {@include steps;@for $i from 1 through length($steps) {& > li:nth-child(#{$i}) {// 逐步定制}}
}
6.3 实战模板示例
以下为一个完整的实战模板，将 HTML 结构、CSS 计数器逻辑与状态样式整合，便于直接应用于实际页面。
<section class="step-wrap" aria-label="步骤导航示例"><ol class="steps" aria-label="步骤列表"><li aria-current="step">第一步：选择产品</li><li>第二步：填写信息</li><li>第三步：确认与提交</li><li>第四步：完成</li></ol>
</section>
/* 组合示例：使用变量与计数器构建模板 */
:root {--step-gap: 1rem;--step-size: 2rem;--step-bg: #e6e6e6;--step-active: #2c7be5;
}
ol.steps {counter-reset: step;list-style: none;display: flex;gap: var(--step-gap);
}
ol.steps > li {counter-increment: step;padding-left: calc(var(--step-size) + 0.5em);position: relative;
}
ol.steps > li::before {content: counter(step);position: absolute;left: 0;width: var(--step-size);height: var(--step-size);border-radius: 50%;display: grid;place-items: center;background: var(--step-bg);
}
ol.steps > li[aria-current="step"] {background: var(--step-active);color: #fff;border-radius: .5rem;
}
