ol 不适合做常规导航菜单，因其语义表示有先后顺序的内容，而主导航项之间无逻辑次序；误用会误导辅助技术、损害seo、引发样式异常。
ol 不适合做常规导航菜单，这是最常被忽略的前提。
导航菜单本质上是“并列可选入口”，项与项之间没有顺序依赖或编号意义；而 ol 的语义是「有先后、有层级序号」，比如步骤说明、排行榜、法律条款条目。用它做主导航，既误导辅助技术（屏幕阅读器会读“第1项、第2项…”），也干扰 SEO 对导航意图的识别。
为什么 ol 不能替代 ul 做主导航
浏览器和辅助工具严格按语义解析列表：ol 暗示内容存在逻辑次序或权重排序，但主导航的“首页/产品/关于”之间并无先后执行关系。强行使用会导致：
- 屏幕阅读器播报“有序列表，共4项”，接着逐项读“第1项 首页”——用户误以为这是流程步骤
- 搜索引擎可能降低导航区域的语义可信度，影响结构化数据提取
- CSS 重置时容易遗漏
ol的默认counter-reset行为，造成意外编号残留
ol 真正适用的导航类场景
只有当导航本身承载「顺序性」或「步骤性」含义时，ol 才合理。典型例子包括：
- 向导式表单的进度条：
<ol class="wizard-steps"> <li aria-current="step">填写信息</li> <li>确认订单</li> <li>完成支付</li> </ol> - 法律文档或协议条款的逐条引用（如“第3.2条：数据保留期限”）
- 教程页面的步骤导航：
<ol> <li>安装 Node.js</li> <li>初始化项目</li> <li>运行开发服务器</li> </ol>
如果硬要用 ol 做主导航，至少要砍掉三处默认行为
即便违背语义，有时为满足旧系统或特定设计需求不得不妥协。此时必须显式覆盖以下三点：
- 用
list-style-type: none彻底移除数字编号，否则视觉上出现“1. 首页 2. 产品…” - 重置计数器：
counter-reset: none，防止 CSS 伪元素（如::before）意外触发编号 - 移除隐含的
margin-left缩进 ——ol默认比ul多 40px 左右缩进，需设padding-left: 0; margin-left: 0
面包屑导航才是 ol 的标准用武之地
面包屑路径天然具有顺序性（首页 → 分类 → 子类 → 当前页），ol 是 W3C 推荐方案。关键点在于：
- 必须包裹在
nav中并加aria-label="Breadcrumb" - 当前页项用
aria-current="page"标记，而非禁用链接或纯文本 - CSS 中避免用
content: " > "直接拼接分隔符，应通过li:not(:last-child)::after控制，确保无障碍工具不误读分隔符为内容
ol”，而是“有没有意识到它正在悄悄改写页面的语义契约”。导航结构一旦定型，后续的可访问性修复成本远高于初期选对标签。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
