ol 的 start 属性直接指定第一个 li 的显示编号,后续自动递增;start 值必须为整数,小数或字符串会被截断或退化为 1;type 需配合 start 实现字母/罗马数字起始,如 type="a" start="3" 显示 “c.”;value 属性可覆盖 start 并重置后续计数;reversed 仅视觉倒序,不改变 DOM 顺序与可访问性。

ol 的 start 属性直接设起始数字
能,start 属性就是干这事的——它让第一个 <li> 显示你指定的整数,后续项自动 +1。比如 <ol start="7"> 渲染出来就是 “7.”、“8.”、“9.”,不需要 JS 或 CSS。
常见错误现象:<ol start="7"><li>第一步</li><li>第二步</li></ol> 显示的是 “7. 第一步”、“8. 第二步”,不是“1. 第一步”再偏移 6 —— 它不跳过内容,只改显示起点。
-
start值必须是整数:正数、负数、零都行;start="-2"→ 显示 “-2.”、“-1.”、“0.” - 小数或字符串会被静默截断或退化为
1:start="5.8"等效于start="5";start="abc"回退到1 - 它不影响 DOM 顺序、语义或可访问性:屏幕阅读器仍按实际位置播报“第一项”,和显示的 “7.” 不一致
type 和 start 必须配合使用才能切字母或罗马数字
想从字母 “c” 开始?不能写 start="c"(非法),得用 type="a" start="3" —— 因为 a=1、b=2、c=3,所以 start="3" 对应显示 “c.”、“d.”、“e.”。
同理:<ol type="I" start="4"> 显示 “IV.”、“V.”、“VI.”;<ol type="A" start="0"> 行为不标准,部分浏览器映射为 “A.”,但应避免。
立即学习“前端免费学习笔记(深入)”;
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
-
type只支持五种值:"1"、"a"、"A"、"i"、"I" -
list-style-type(CSS)比type更稳定、支持更多样式,且会覆盖type属性 - 别混写
type="a" start="c"——start只认数字,字符会被忽略
value 属性覆盖 start,且重置后续递增逻辑
如果某个 <li> 显式写了 value="12",那它就显示 “12.”,后面没设 value 的 <li> 会从 13 开始继续递增,start 的值被完全忽略。
示例:<ol start="5"><li>第五项</li><li value="20">第二十项</li><li>第二十一项</li></ol> 渲染为 “5.”、“20.”、“21.”,不是 “5.”、“6.”、“20.”。
-
value只接受整数,非数字字符串(如value="x")会被忽略,该项回退到自动计数 - 设了
value的<li>之后所有未设value的项,都按它 +1、+2 继续 - 混用
start和多个value容易失控,建议全局用start,局部覆盖才用value
reversed 不改变 start 含义,只倒着减
reversed 是视觉倒序,不是 DOM 重排。<ol start="5" reversed><li>A</li><li>B</li><li>C</li></ol> 显示 “5. A”、“4. B”、“3. C”,DOM 顺序仍是 A→B→C,键盘焦点和屏幕阅读器顺序也不变。
注意:reversed 在旧版 Safari(iOS 12.2 之前)和 IE 中不支持,需服务端反转数据或用 JS 调换节点顺序。
-
start决定第一个可见编号,reversed决定它是递减还是递增 - 项数不足时,编号只减到 1 就停,不会出现负数或补零
- 动态插入新
<li>时,start和reversed都不会自动重算,新增项仍按原逻辑走
最容易被忽略的是:start 控制的是「第一个显示几」,不是「从第几个逻辑项开始」;value 一旦出现,就切断整个列表的自动计数节奏;而屏幕阅读器永远按 DOM 顺序读,和视觉编号可能错位——做无障碍适配时得额外留意这点。


















