ol的start属性只接受整数,小数或字符串会静默转为整数或回退到1;它仅决定计数起始值,不控制显示样式,需配合type属性生效,且不影响语义顺序。

ol 的 start 属性只接受整数,小数或字符串会静默失效
直接写 start="5.8" 或 start="abc" 不会报错,但浏览器会强制转成整数或回退到默认值 1。前者变成 start="5",后者完全失效——列表仍从 1 开始。这不是 bug,是规范行为。
常见错误是把 start 当作“第几个字母”来用,比如想从字母 c 开始就写 start="c"。实际必须写 start="3"(因为 c 是字母表第 3 个),且要配合 type="a" 才生效。
-
start值始终参与计数逻辑,和type无关;它不决定“显示什么”,只决定“从几开始数” - 如果用了
reversed,start表示的是第一个显示的数字,不是最大值 - 动态修改
start(比如 JS 改ol.start = 100)会导致序号跳变,但 DOM 没重绘,屏幕阅读器可能读错
type 属性和 CSS list-style-type 的区别与混用风险
type 是 HTML 属性,只作用于当前 <ol> 元素,优先级高于 CSS 的 list-style-type;但一旦用了 CSS 覆盖(如 ol { list-style-type: lower-alpha; }),type 就被忽略。
更关键的是:只有 type="1"(阿拉伯数字)时,start 的数值才直观对应显示结果;换成 type="i" 或 type="A",start="5" 显示的是 v 或 E,不是“第 5 个罗马数字”或“第 5 个大写字母”的直觉映射——因为浏览器内部仍按阿拉伯数字计数,再查表转换。
立即学习“前端免费学习笔记(深入)”;
-
type值不区分大小写,但建议统一用小写(type="a"而非type="A"),避免部分旧浏览器解析异常 - CSS 的
list-style-type支持更多值(如lower-greek),但type属性不支持 - 若同时设了
type和list-style-type,以list-style-type为准(CSS 层叠规则)
value 属性只影响单个 li,后续项仍按原逻辑递增
<li value="10"> 不是“设置整个列表起始值”,它只让这一项显示为 10.,下一项仍按前一项 +1 计算——除非下一项也带 value。
例如:
<ol> <li value="10">第一项</li> <li>第二项</li> <li value="20">第三项</li> </ol>渲染结果是:
10. 第一项 → 11. 第二项 → 20. 第三项。
-
value对嵌套<ol>无效,只作用于同级<li> - 和
start同时存在时,start优先:它设的是第一个<li>的基础值,value在此基础上覆盖 - 不要依赖
value实现“跳号”,可访问性工具可能无法正确识别语义断层
用 CSS counter 替代 start 的典型场景
当需要跨多个 <ol> 连续编号、插入图标前缀、或做“章节-小节”嵌套时,start 就不够用了。此时必须用 CSS counter-reset + counter-increment。
比如让两个分开的 <ol> 接续编号:
ol {
counter-reset: item 5;
}
ol li {
counter-increment: item;
}
ol li::before {
content: counter(item) ". ";
}注意:这里 counter-reset: item 5 等效于 start="6"(因为 counter-increment 在 ::before 渲染前执行)。
- 用
counter()第二个参数可指定样式,如counter(item, upper-roman),比type更灵活 - 务必加
list-style: none移除原生序号,否则新旧序号会重叠 - 嵌套时用
counter(item, decimal)和counter(subitem, lower-alpha)分开定义,避免互相干扰
start 和 type 都只控制“怎么显示”,不改变列表项的语义顺序或 DOM 位置。如果你靠序号做 JS 逻辑判断(比如“第 3 项触发操作”),永远该用 li 的索引或 data-index,而不是读取渲染后的数字。**



















