ol的start属性从指定整数开始,如start="3"即首项显示“3.”、次项“4.”;它不跳过项也不重置DOM,仅控制视觉起始数字,负数、零合法,非整数将被截断或退化为1。

ol 的 start 属性到底从几开始?
它不是“第几个”,而是“显示的数字值”。start="3" 表示第一个 <li> 显示为 3,第二个是 4,依此类推——和你手写编号逻辑一致,不跳过、不重置。
常见错误是以为 start="2" 会让列表从第二项开始渲染(跳过第一项),其实不会:<ol start="2"><li>A</li><li>B</li></ol> 会显示为:
2. A 3. B
start 属性在嵌套 ol 中是否继承?
不继承。每个 <ol> 独立计数,start 只作用于当前列表本身。
比如外层 <ol start="5"> 包含一个子 <ol>,子列表默认仍从 1 开始,除非显式设置 start:
立即学习“前端免费学习笔记(深入)”;
<ol start="5">
<li>一级项</li>
<li>一级项
<ol start="10">
<li>二级项</li>
<li>二级项</li>
</ol>
</li>
</ol>结果是:
5. 一级项 6. 一级项 10. 二级项 11. 二级项
start 值为负数或非数字会发生什么?
浏览器会尝试解析:如果 start 值无法转为整数(如 start="abc" 或 start=""),则退回到默认行为——从 1 开始。
-
start="-1"是合法的,会显示 -1、0、1… -
start="2.5"被截断为 2(按整数部分处理) -
start="0"显示 0、1、2…(不是空或隐藏) -
start="null"或缺失该属性,等价于start="1"
用 CSS counter-reset 替代 start?什么时候该换?
当需要更灵活控制(比如跨多个列表连续编号、跳号、条件重置),counter-reset + counter-increment 更可靠;start 仅适用于单个有序列表的简单偏移。
例如,两段 <ol> 想接续编号(第一段到 5,第二段从 6 开始),start 无法自动感知前一个列表长度,必须手动算好填值;而用 CSS:
<ol class="continuing">...</ol>
<ol class="continuing">...</ol>
<p>.continuing {
counter-reset: list-item 5; /<em> 第二个列表从 6 开始 </em>/
}
.continuing li {
counter-increment: list-item;
}
.continuing li::before {
content: counter(list-item) ". ";
}这种写法绕开了 HTML 层的硬编码,更适合动态内容或 CMS 场景。
注意:CSS 方案不改变 DOM 结构,对屏幕阅读器的支持弱于原生 <ol> + start,无障碍要求高时慎用。



















