不能跳过编号,start属性仅设定首项显示数字并线性递增;它不跳过DOM项,只控制视觉起始值,且仅作用于当前ol元素,负数、零合法,非整数退化为1。

有序列表的 start 属性能跳过编号吗?
能,但只支持整数起始值,不支持“跳到第10项再继续”这种动态跳转。比如你想让第二个 <ol> 从 15 开始编号,直接写 <ol start="15"> 就行。它会按顺序递增:15、16、17……注意这个属性对嵌套子列表无效,只作用于当前 <ol> 根元素。
用 counter-reset 和 counter-increment 能实现更灵活的跳转吗?
可以,而且这是唯一能真正“跳号”的方式——比如跳过 3、4,直接从 5 开始,或者让某一项显示为 “8.1” 这类复合编号。关键点在于:必须配合 ::before 伪元素和 content 使用,不能只靠 CSS 属性自动渲染。
常见错误是忘记重置计数器或漏写 counter-increment,导致编号全乱或不显示。示例:
<ol class="jumped"> <li>第一项</li> <li>第二项</li> <li class="skip">第三项(不编号)</li> <li>第四项(实际显示为 4)</li> </ol>
CSS 需这样写:
立即学习“前端免费学习笔记(深入)”;
.jumped {
counter-reset: item 3; /* 从 4 开始计数 */
}
.jumped li {
counter-increment: item;
}
.jumped li::before {
content: counter(item) ". ";
}为什么 value 属性在 <li> 上有时不生效?
因为 value 是 HTML4 的遗留属性,现代浏览器虽基本支持,但存在几个硬限制:
- 只对
<li>直接子元素有效,嵌套在<div>或其他标签里的<li>会忽略它 - 值必须是整数,
value="10"可以,value="10a"或value="十"会被当成 1 处理 - 如果父级
<ol>用了start,value会覆盖该起始值,但后续项仍按默认规则递增(不是“接着 value 继续加”,而是重置为 value+1)
所以别指望靠多个 value 实现“1→2→10→11”这种序列;真要这种效果,老实用 CSS 计数器。
跨多个 <ol> 元素连续编号怎么处理?
原生 HTML 不支持,start 是孤立的。必须用 CSS 计数器 + 自定义计数器名,并确保所有相关 <ol> 共享同一个计数器作用域。
做法是:在外层容器上 counter-reset: mylist 0,每个 <ol> 内部不重置,只用 counter-increment: mylist,然后统一用 counter(mylist) 渲染。容易踩的坑是:
- 忘记给外层加
counter-reset,导致计数器未初始化 - 某个
<ol>里误写了counter-reset: mylist,把前面的计数清零了 - 用 JS 动态插入新
<li>后没手动触发counter-increment,新项没编号
复杂点在于,一旦涉及 JS 插入、折叠/展开、服务端分页,纯 CSS 计数器就很难维持一致状态——这时候得考虑用 JS 控制 value 或生成内联 data-counter 值来兜底。



















