应使用list-style-type而非type属性设置有序列表样式，因type已被HTML5废弃、兼容性差且与CSS冲突；需重置缩进、避免混用，并用CSS计数器实现复杂编号。
别用 type 属性改 ol 样式——它已被 HTML5 废弃，靠不住，且和 CSS 冲突。 真正该用的是 list-style-type，配合重置缩进、必要时用伪元素或计数器。
为什么 type 属性不能信任
浏览器虽还解析 type="A" 或 type="i"，但这只是兼容性残留。W3C 明确标记为 obsolete（废弃），未来可能彻底失效。更实际的问题是：
-
type只接受"1"、"a"、"A"、"i"、"I"五个值，写错（比如type="lower-roman"）会被静默忽略，退化成数字 - 只要 CSS 里写了
list-style-type，type就完全失效——你改了 HTML 属性，用户看到的还是 CSS 决定的样式 -
start和type组合不可靠：比如<ol type="I" start="10">在 Safari 旧版里可能仍从I开始，而非X - 无障碍工具优先读取 CSS 渲染结果，
type的语义价值已大幅弱化
list-style-type 怎么用才稳
这是现代标准做法，支持更多值、可复用、易维护。直接写在 ol 上或用 class 控制：
- 基础值：
decimal（1,2,3）、lower-alpha（a,b,c）、upper-roman（I,II,III）、lower-greek（α,β,γ） - 必须重置缩进：各浏览器默认
padding-left不一致（Chrome 40px，Firefox 2.5em），统一加padding-left: 1.5em和margin: 0 - 避免混用：不要同时写
<ol type="A" style="list-style-type: upper-alpha;">——冗余且行为不可预测 - 动态切换推荐 JS 操作 class：
olElement.classList.replace('roman-list', 'alpha-list')，而不是改ol.type
编号和文字不对齐？先清掉默认间距
这不是样式选错了，而是浏览器默认 padding/margin 干扰。常见表现是编号“飘”在左边，文字缩进不一致：
立即学习“前端免费学习笔记（深入）”；
- 必做两件事：
ol { padding-left: 0; margin: 0; } - 若要编号左对齐容器边缘，可用
text-indent: -1.5em配合padding-left: 1.5em把文字拉回来 - 用了非系统字体或调了
line-height后，基线偏移更明显，这时得微调vertical-align或line-height，比换编号类型更耗时间
真要自定义前缀或嵌套编号，绕不开 CSS 计数器
type 和 list-style-type 都做不到 “Step 1.”、“2.1.3”、“Chapter-02” 这类格式。必须用 counter-reset + counter-increment + ::before：
- 先关掉默认编号：
ol { list-style-type: none; } - 用
counter-reset: section;初始化计数器，li { counter-increment: section; } - 用
li::before { content: "Section " counter(section) ". "; }插入前缀 - 嵌套层级（如 1 → 1.1 → 1.1.1）必须用
counters(section, ".")，type对此零影响
复杂点在于：计数器依赖 DOM 结构，JS 动态增删 li 时需手动触发重计数；而 type 属性根本无法参与这种逻辑。
