直接用 list-style-type 设置编号类型最稳妥,如 lower-alpha 显示 a、b、c,upper-roman 显示 I、II、III;start 属性仅控制起始数字(如 start="5"),不改变编号样式;嵌套 ol 需显式重置样式;禁用原生编号后可用 li::marker 或 li::before 自定义前缀;避免使用已废弃的 type 和 value 属性。

直接用 list-style-type 换编号类型最稳
想把 <ol> 的 1、2、3 换成 a、b、c 或 I、II、III,直接在 <ol> 上设 list-style-type 就行。它不依赖 HTML 的 type 属性(已废弃),也不需要 JS 干预。
-
decimal:阿拉伯数字(默认) -
lower-alpha:小写字母 -
upper-roman:大写罗马数字 -
lower-greek:小写希腊字母(Firefox/Chrome 支持,Safari 有限)
注意:list-style-type 作用于 <ol> 元素本身,不是 <li>;嵌套的子 <ol> 不会自动继承,必须显式重置,否则可能外层是数字、内层突然变字母。
start 属性只管“从几开始数”,不管“显示成啥”
start="5" 让编号视觉上从 5 开始,但显示内容仍由 list-style-type 决定:设了 lower-alpha 就显示 e、f、g;设了 upper-roman 就显示 V、VI、VII。它不识别字母或罗马数字的“第几个”,只按阿拉伯数字计数再查表转换。
-
start只接受整数,start="5.8"会被截断为 5,start="abc"直接失效回退到 1 - 和
reversed一起用时,start表示第一个显示的值,不是最大值 - 动态改
ol.start = 100不会触发重绘,屏幕阅读器可能读错,得手动替换节点或强制 layout
真要自定义前缀、图标或对齐,关掉默认样式再用 ::marker 或 li::before
内置类型不够用(比如加 “Step ” 前缀、换字体、塞 SVG 图标),就得先关掉原生编号:list-style: none,再用伪元素重建。
立即学习“前端免费学习笔记(深入)”;
- 优先用
li::marker:语义正确、性能好,但 Safari ≤16.6 不支持 - 降级用
li::before:兼容性好,但需确保父<ol>有counter-reset: list-item(<ol>默认自带,一般不用重复写) - 编号和文字基线不对齐?大概率是
line-height或vertical-align没调准,比换编号类型更耗时间
示例(li::marker):
li::marker { content: "→ " counter(list-item) ". "; font-weight: bold; }
别碰 value 和 type 属性
<li value="7"> 看似能跳号,实际会让后续项继续 +1,极易导致编号跳跃、重复甚至倒退;<ol type="a"> 在 HTML5 中已标记为 obsolete,不同浏览器对 type="i" 渲染不一致,且无法和 ::marker 配合。现代项目一律用 list-style-type + start 组合替代。
真正容易被忽略的是:CSS 计数器(counter-reset/counter-increment)生成的编号,屏幕阅读器默认仍按 DOM 顺序读“第1项、第2项”,不会读你伪元素里写的 “Step 3:”,如需可访问性,得额外加 aria-posinset 和 aria-setsize。



















