直接用list-style-type可修改ol编号类型，如decimal、upper-alpha等，但需重置padding-left和margin以解决浏览器默认缩进不一致导致的错位问题；type属性已废弃，应避免使用。
直接用 list-style-type 就能改，但浏览器默认缩进不一致，不重置 padding 和 margin 会错位；type 属性已废弃，别再用。
怎么用 CSS 改 ol 的编号类型
改编号样式只靠 list-style-type，它作用在 ol 元素上，不是 li。常见值有：
-
decimal：1, 2, 3（默认） -
upper-alpha：A, B, C -
lower-alpha：a, b, c -
upper-roman：I, II, III -
lower-roman：i, ii, iii
示例：<ol style="list-style-type: upper-alpha;"></ol> → A.、B.、C.
注意：list-style-type 不影响计数逻辑，只控制显示形式；若要跨层级连续编号（比如 A → B → 1 → 2），必须靠嵌套结构，不是靠这个属性。
为什么编号和文字总不对齐
因为 Chrome 默认 ol 的 padding-left: 40px，Firefox 是 2.5em，Safari 又不同。不显式重置就会漂移。
- 务必加
padding-left: 0或统一设为1.5em等具体值 - 同时清掉
margin：margin: 0，避免外边距干扰布局 - 若想编号左贴容器边缘、文字缩进，可用
text-indent: -1.5em拉回文字（配合padding-left: 1.5em）
没重置前，在 Firefox 里看着对齐，换到 Chrome 就偏右——这不是 bug，是浏览器默认样式差异。
怎么实现多级嵌套编号（A → 1 → a）
关键不是样式，是 DOM 结构是否合法：子 ol 必须作为父 li 的直接子元素，否则浏览器当全新列表处理，计数器强制重置。
- ✅ 正确写法：
<ol type="A"><li>A. 内容<ol type="1"><li>1. 子项</li></ol> </li></ol> - ❌ 错误写法：把第二个
<ol type="1"></ol>放在父外面，变成兄弟节点 -
type属性虽还能用，但 HTML5 已标记为 obsolete；推荐全用list-style-type+ 类名控制，例如<ol class="level-2"></ol>配 CSS
真正难的不是写出来，而是用了自定义字体或调整过 line-height 后，编号和文字基线不齐——这时候得微调 vertical-align 或伪元素的 top 值，比换编号类型花的时间多得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
