ol 的 list-style-type 值必须为有序语义枚举项，如 decimal、lower-alpha、upper-roman 等；circle/square 会被忽略且不降级；需重置 padding/margin 以统一浏览器表现，并用 ::marker 实现自定义编号样式。
ol 的 list-style-type 值必须匹配有序语义
给 ol 设 list-style-type 时，值必须是数字/字母/罗马数字类枚举项，比如 decimal、lower-alpha、upper-roman。写成 circle 或 square 会被浏览器直接忽略——它只认有序列表合法类型，不会 fallback 到无序样式。
常见可用值：
-
decimal（默认，1 2 3…） -
lower-alpha（a b c…） -
upper-alpha（A B C…） -
lower-roman（i ii iii…） -
upper-roman（I II III…） -
none（隐藏编号，但缩进还在，需手动清padding-left）
注意：armenian、cjk-ideographic 等扩展值在 Safari 15.4 之前、IE9、旧版 Opera 中不支持，项目要兼容老环境就别用。
编号和文字不对齐？先重置 padding 和 margin
Chrome 默认 ol 的 padding-left: 40px，Firefox 是 2.5em，Safari 又不同。不显式重置，编号和文字的相对位置在各浏览器里飘忽不定。
安全做法：
- 统一设
padding-left: 0或具体值（如1.5em） - 加
margin: 0防止外边距干扰布局 - 若想编号贴左、文字内缩，可用
text-indent: -1.5em拉回，配合padding-left: 1.5em
漏掉任一，都可能让“对齐”变成玄学。
要用图标或自定义前缀？关掉默认再上 ::marker
想在编号前加 Step 、▶ 或换字体颜色，不能靠 list-style-type，得用 ::marker 伪元素——它是专为编号设计的语义化钩子。
操作步骤：
- 先写
ol { list-style: none; }关掉默认渲染 - 再写
li::marker { content: "Step " counter(list-item) ": "; color: #333; } - 确保父
ol有counter-reset: list-item（ol默认自带，一般不用重复写）
兼容性注意：::marker 在 Safari 15.4+、Chrome 89+、Firefox 89+ 可用；旧版 Safari 或 IE 需降级用 li::before，但会失去语义和部分可访问性支持。
line-height 和 vertical-align 才是真难点
改完编号样式后，如果发现数字和文字基线错位、行高撑开、图标上下浮动，问题大概率不在 content 或 counter()，而在字体渲染细节。
关键控制点：
-
line-height影响整体行框高度，设为1.2或normal后仍偏移，就得微调 -
vertical-align: middle或baseline对::marker有效，但对li::before需配合position: absolute - 中文字体下
square或upper-roman显示过小？试试font-size: 0.9em单独作用于::marker
跨浏览器像素级一致，往往卡在这一步——比选什么编号类型花的时间多得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
