用 css counter 实现多级步骤编号（如“1.1.2”），需每层 ol 显式设置 counter-reset，配合 counter-increment 和 counters()；推荐 ::before 伪元素控制样式，清空默认内外边距并用 flex 布局适配响应式，兼顾可访问性与视觉表现。
直接用 ol 做步骤条，但别指望浏览器自动编号嵌套层级
浏览器对 ol 的默认编号只作用于当前层，子 ol 不会继承父级序号（比如不会显示 “2.1”“2.2”），这是规范行为，不是 bug。想实现带点分隔的多级步骤编号（如 “1.1.2”），必须用 CSS counter，不能只靠 list-style-type。
counter-reset 和 counters() 必须配对写，且重置位置很关键
常见错误是只在最外层 ol 上写 counter-reset: step，结果内层编号全乱。正确做法是每一层 ol 都要显式重置：
-
ol.step { counter-reset: step; }—— 每个步骤容器初始化计数器 -
ol.step > li { counter-increment: step; }—— 每个li自增 -
ol.step > li::before { content: counters(step, ".") ". "; }—— 拼接层级，注意引号不能省 - 如果某层需要独立编号（如子步骤从 1 重新开始），就在那层
ol上再写一次counter-reset: step
步骤条视觉样式建议：用伪元素替代 list-style 更可控
直接改 list-style-type 只能选有限类型，且无法精确控制颜色、大小、间距。推荐用 ::before：
- 给
li设position: relative，再用::before绝对定位画圆点或数字 -
content可填数字、Unicode 符号（如"✓"）、甚至 base64 SVG - 避免同时设
list-style-type和::before，否则两者叠加，视觉错乱 - 若需悬停高亮，直接给
li:hover::before改background-color或transform即可
响应式步骤条要注意 flex 布局和缩进冲突
横排步骤条常用 display: flex，但容易和列表默认缩进打架：
- 务必先清掉默认
padding-left和margin：ol, li { margin: 0; padding: 0; } -
ol.step { display: flex; flex-wrap: wrap; gap: 16px; }比手动算margin-right更稳 - 小屏切回竖排时，
@media (max-width: 768px) { ol.step { flex-direction: column; } }，别漏掉重置gap - 如果步骤项文字过长导致折行，
li { min-width: 0; }防止 flex 容器撑宽
真正难的是语义与视觉分离——步骤条既要让屏幕阅读器读出顺序，又得让视觉呈现不依赖编号本身。别删 ol 改用 div，也别用 list-style: none 后完全丢掉计数逻辑；用 counter + 伪元素才是兼顾可访问性与样式的正解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
