推荐使用 css 的 list-style-type 属性控制有序列表编号样式，type 属性已过时；需配合 counter-reset、counter-increment 和 ::before 实现复杂编号逻辑，并注意可访问性。
用 type 属性设置编号样式（但注意已被弃用）
type 是 <ol></ol> 最早支持的编号控制方式，比如 <ol type="A"></ol> 生成 A、B、C，type="i" 生成小写罗马数字。但它在 HTML5 中已**被标记为过时（obsolete）**，浏览器虽仍兼容，但 W3C 明确不鼓励使用。现代项目中硬写 type 会触发 Lighthouse 可访问性警告，且无法与 CSS 计数器联动。
用 list-style-type 实现可靠样式控制
CSS 的 list-style-type 是当前唯一推荐方式，它作用于 <ol></ol> 元素本身，覆盖所有子项编号。支持值包括：decimal（默认）、lower-alpha、upper-roman、lower-greek 等。关键点：
- 必须写在
<ol></ol>或其类选择器上，对<li>单独设无效 - 部分值如
hebrew或armenian在旧版 Safari 中渲染异常，需实测 - 若同时用了
counter-reset或counter-increment，list-style-type会被忽略——CSS 计数器优先级更高
<ol style="list-style-type: upper-alpha;"> <li>第一项</li> <li>第二项</li> </ol>
用 CSS 计数器实现自定义编号逻辑
当需要跳号、多级嵌套编号（如 2.1、2.2）、或编号含前缀/后缀（如 “步骤-1”）时，list-style-type 不够用，必须用 CSS 计数器。核心是三步：
- 用
counter-reset在<ol></ol>上初始化计数器（如counter-reset: step;） - 用
counter-increment在<li>上递增（如counter-increment: step;） - 用
::before伪元素 +content: counter(step)插入编号
注意：此时要显式清除默认编号，加 list-style: none; 到 <ol></ol>，否则原生编号和伪元素会重叠。
嵌套有序列表的编号继承与重置
嵌套 <ol></ol> 时，子列表默认从 1 开始，但编号类型不会自动变化——外层是 decimal，内层也是 decimal，除非手动指定。常见做法：
- 用 CSS 类区分层级，例如
.ol-level-2 { list-style-type: lower-alpha; } - 用属性选择器按深度匹配：
ol ol { list-style-type: lower-roman; } - 若用计数器，子
<ol></ol>需单独counter-reset，否则会沿用父级计数器值
最易被忽略的是可访问性：屏幕阅读器依赖原生 <ol></ol> 结构播报序号，纯靠伪元素生成编号且未设 aria-label 时，读屏软件可能只读“列表项”，不读编号。真要定制，得同步维护 aria-setsize 和 aria-posinset。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
