start属性是<ol>原生支持的起始编号控制方式,必须直接写在<ol>标签上且值为整数(正、负、零均合法),非整数会被截断或退化为1;需与type配合使用,如type="a"时start="3"显示“c.”而非“3.”;常见失效原因是CSS隐藏序号、type未匹配或value局部覆盖干扰。

start 属性是唯一无需 JavaScript 或 CSS 就能控制 ol 编号起点的原生方案,但写错位置、传错类型或误判语义边界时,它就“看起来没反应”。
怎么正确设置 start 值
必须直接写在 ol 标签上,且值为整数(正、负、零都合法):
-
start="7"→ 显示 “7.”、“8.”、“9.”,不是跳过前 6 项 -
start="-2"→ 显示 “-2.”、“-1.”、“0.”,所有现代浏览器都支持 -
start="5.8"或start="abc"→ 静默转为5或退化为1,无报错但失效 -
start="c"或start="IV"→ 完全无效,start只认阿拉伯数字逻辑
start 和 type 必须配合使用
单独设 start="5" 时,只有 type="1"(默认)才直观显示 “5.”;其他类型下,start 表示“序列中的第几个”,而非最终字符:
-
<ol type="a" start="3"><li>c</li></ol>→ 显示 “c.”(a=1, b=2, c=3) -
<ol type="I" start="4"><li>IV</li></ol>→ 显示 “IV.”(I=1, II=2, III=3, IV=4) -
<ol type="a" start="5">却期望显示 “5.” → 不成立,type决定了渲染样式,start只提供计数起点
为什么写了 start 却还是从 1 开始
常见原因不是属性写错,而是视觉或语义被干扰:
立即学习“前端免费学习笔记(深入)”;
-
list-style: none或display: flex等布局隐藏了序号本身,start仍在计算,只是你看不见 -
ol外层有aria-hidden="true"或visibility: hidden,序号不可见也不可访问 - 用了
type="a"却没配start的字母序位置(比如想从 d 开始却写start="4"而非start="4"+type="a") - 服务端渲染(SSR)中传入字符串未转数字,如 React 中写
start={String(currentStart)},导致"5.2"被截断或退化
start 和 value 别混用
start 控制整个列表起始值,value 只覆盖单个 li 并中断后续自动递增:
-
<ol start="10"><li value="20">B</li></ol>→ 显示 “10.”(第一个隐式li)、“20.”(显式value),第三项会是 “21.” - 多个
value连续出现:<li value="5"><li value="1">→ 就真显示 “5.”、“1.”,不继承也不校验合理性 -
value对嵌套ol无效,只作用于同级li - 可访问性工具可能无法识别
value导致的语义断层,纯展示需求优先用start
真正容易被忽略的是:嵌套 ol 中 start 不继承,每个 ol 独立计数;而一旦用 CSS 的 list-style-type 覆盖了 type,start 仍生效,但编号样式由 CSS 决定——此时你得自己确认映射关系是否符合预期。



















