list-style-type 是唯一可靠、语义正确、浏览器原生支持的修改编号类型的方式；HTML 的 type 属性已废弃，不推荐使用，因其兼容性差、破坏可访问性且无法与 CSS 同时生效。
list-style-type 是唯一可靠、语义正确、浏览器原生支持的修改方式；HTML 的 type 属性已废弃，不推荐使用。
用 list-style-type 切换编号类型（现代标准做法）
该 CSS 属性直接作用于 <ol> 元素，控制整个列表的编号形式。它不改变实际顺序或语义，只影响渲染。
-
decimal：阿拉伯数字（1, 2, 3），默认值 -
lower-alpha：小写字母（a, b, c） -
upper-alpha：大写字母（A, B, C） -
lower-roman：小写罗马数字（i, ii, iii） -
upper-roman：大写罗马数字（I, II, III）
示例：<ol style="list-style-type: upper-roman;"><li>第一项</li><li>第二项</li></ol> 渲染为 I. 第一项、II. 第二项。
别再用 type 属性（兼容性差 + 语义失效）
虽然 <ol type="a"> 在部分浏览器中仍能显示小写字母，但它在 HTML5 中已被标记为 obsolete（废弃），且存在几个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 无法与 CSS 同时生效——若同时设了
type="a"和style="list-style-type: decimal"，行为未定义，Chrome 和 Safari 可能表现不一致 - 不支持小写希腊字母（
lower-greek）、带前缀编号等现代需求 - 破坏可访问性：屏幕阅读器可能忽略
type，仅依赖 DOM 顺序和list-style-type计算逻辑
真要兼容老项目，也建议统一转为 class 控制：<ol class="alpha-list"> + CSS 规则，而非混用 HTML 属性。
多级嵌套时编号错乱？必须严格嵌套 <ol> 在 <li> 内
常见错误是把子 <ol> 放在父 <ol> 外部，例如：
<ol><li>A</li></ol><ol><li>1</li></ol>
这会导致计数重置、层级断裂、语义丢失。正确写法是：
<ol type="A"><li>A项<ol><li>1项</li></ol></li></ol>
此时子 <ol> 的 list-style-type 可独立设置，且浏览器会自动继承/重置计数器。如需 A. → 1. → a.，只需：
- 外层
<ol style="list-style-type: upper-alpha;"> - 中间
<ol style="list-style-type: decimal;"> - 内层
<ol style="list-style-type: lower-alpha;">
编号和文字不对齐？关键在重置 padding 和 margin
不同浏览器对 <ol> 的默认 padding-left 差异极大（Chrome 40px，Firefox 2.5em，Safari 略有不同），这是导致“编号缩进飘忽”“文字悬空”的根本原因。
必须显式重置：
-
padding-left: 0或具体值（如1.5em） -
margin: 0（尤其防外部干扰） - 若需文字左对齐容器边缘而编号保留缩进，可用
text-indent: -1.5em配合padding-left: 1.5em
真正难调的不是改类型，而是让编号基线和文字行高、字体度量对齐——特别是用了非系统字体或设置了 line-height: 1.2 之后，vertical-align 往往比换编号更耗时间。
