list-style-type 可切换内置编号样式，但需重置 padding 和 margin 才能对齐；推荐用 li::marker 自定义编号，注意 safari 兼容性及基线对齐问题。
直接用 list-style-type 就能切换编号样式，但浏览器默认缩进不一致，不重置 padding 和 margin 会导致对齐错乱。
用 list-style-type 切换内置编号类型
这个 CSS 属性作用于 <ol></ol> 元素本身，不是 <li>。它控制的是浏览器自动生成的序号外观，无需手动写数字。
-
decimal：阿拉伯数字（1, 2, 3）——默认值 -
lower-alpha：小写字母（a, b, c） -
upper-alpha：大写字母（A, B, C） -
lower-roman：小写罗马数字（i, ii, iii） -
upper-roman：大写罗马数字（I, II, III） -
lower-greek：希腊字母（α, β, γ），但 Firefox 和 Safari 支持有限，慎用
示例：<ol style="list-style-type: upper-roman;">
<li>第一步</li>
<li>第二步</li>
</ol> 会显示为 I. 第一步、II. 第二步。
为什么编号和文字总不对齐？
因为 Chrome 默认给 <ol></ol> 设了 padding-left: 40px，Firefox 是 2.5em，Safari 又不同。不显式覆盖，就永远没法精确对齐。
- 必须加
padding-left: 0或统一设成1.5em等具体值 - 同时清掉
margin：margin: 0，否则外边距干扰布局 - 若想编号贴左、文字内缩，可用
text-indent: -1.5em配合padding-left: 1.5em拉回文字
错误写法：<ol style="list-style-type: lower-alpha;"></ol> —— 编号飘在左边，文字缩进不一致；正确写法：<ol style="list-style-type: lower-alpha; padding-left: 0; margin: 0;"></ol>
用 ::marker 或 li::before 完全自定义编号
当内置类型不够用（比如要加图标、前缀、换字体、改颜色），就得绕过默认机制。
- 先关掉默认：
ol { list-style: none; } - 现代推荐用
li::marker：li::marker { content: "▶ " counter(list-item); color: #2563eb; }—— 语义清晰、性能好，但 Safari ≤16.4 不支持 - 兼容写法用
li::before：li::before { content: "Step " counter(list-item) ": "; font-weight: bold; } -
counter(list-item)能用，是因为<ol></ol>默认已设counter-reset: list-item，一般不用重复写
真正难的不是改内容，而是让编号和文字基线对齐——尤其用了非默认 font-family 或 line-height 时，vertical-align: middle 或微调 line-height 往往比换编号类型更花时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
