ol仅负责语义和基础编号，精美效果必须由CSS实现；type和start属性已过时，应使用counter-reset/counter-increment控制编号样式与语义。
ol 本身不负责“精美”，它只负责语义正确和基础编号逻辑；所谓精美效果，99% 来自 CSS 控制，而不是靠 type 或 start 这类 HTML 属性。
为什么别用 type 和 start 做样式控制
HTML5 已明确将 type（如 type="A"）和 start 视为过时（obsolete）属性——不是“不支持”，而是“不该用”。浏览器仍兼容，但语义退化、可访问性受损、CSS 覆盖困难。比如：type="i" 在某些屏幕阅读器中会读作 “i, ii, iii”，而非 “一、二、三”；start="3" 会让列表失去语义连续性（比如接续上一段 ol 时，机器无法理解“这是第3项”还是“从3开始新计数”）。
真正可控、可维护、无障碍友好的方式，是用 CSS 的 counter-reset 和 counter-increment。
用 CSS counter 实现灵活编号 + 自定义前缀
想让编号变成「Step 1」「Step 2」，或「❶」「❷」，甚至带颜色/图标/悬停动画，必须走 counter 路线：
立即学习“前端免费学习笔记（深入）”；
- 给
ol设置counter-reset: step; - 给
li设置counter-increment: step; - 用
::before伪元素 +content: "Step " counter(step);插入编号 - 后续所有样式（字体、颜色、背景、间距）都作用在
::before上，不影响内容流
示例：
ol.steps {
counter-reset: step;
padding-left: 0;
}
ol.steps li {
counter-increment: step;
position: relative;
padding-left: 40px;
margin-bottom: 16px;
}
ol.steps li::before {
content: "Step " counter(step);
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
background: #007bff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
}
时间轴类布局必须用 ol，且不能降级为 ul 或 div
如果你做的是时间轴、操作步骤、法律条文、考试流程等强顺序内容，ol 不是“可选”，是必须。原因很实际：
- 读屏器按
ol的序号自然播报，跳过某项会明确提示“第3项”；换成ul就只剩“项目”二字，顺序丢失 - 打印时，
ol编号默认保留；ul+ 手动加 “1.” 容易错位或被截断 - 搜索引擎识别
ol内容为结构化序列，可能增强 FAQ 或步骤类页面的富摘要展示 - 键盘用户
Tab导航时，ol项有隐式 tab index，div堆砌需手动补tabindex，还容易出焦点陷阱
嵌套 ol 时注意层级语义和缩进控制
嵌套有序列表（比如主步骤下含子步骤）常见，但直接靠 HTML 默认缩进既难看又不可控：
- 浏览器对嵌套
ol的缩进量不统一（Chrome 和 Safari 差 8px），响应式下更混乱 - 不要依赖
margin-left硬调，改用padding-inline-start（现代写法）或list-style-position: inside配合text-indent - 多层嵌套时，建议用 CSS 变量区分层级：比如
--level: 1，再通过counter(step var(--level))控制编号格式（如第一层数字，第二层小写字母） - 避免三层以上嵌套——视觉负担重，移动端几乎不可读；真需要，拆成独立
ol+ 标题更清晰
最易被忽略的一点：编号样式是否与内容语义匹配。比如法律条款用大写罗马数字（I, II, III）是惯例，但用 CSS 实现时，别写 list-style-type: upper-roman —— 它不支持自定义前缀（如 “Article I”），必须用 counter() 才能兼顾语义、样式与可访问性。
