HTML ol列表序号如何跳跃显示？属性配合使用技巧-html教程-PHP中文网

ol的start属性仅控制序号起始值，无法实现非连续跳号；真正支持跳号的是CSS counter，通过counter-increment设置递增值，value属性则仅强制单个li编号且打断后续自动递增。

html ol列表序号如何跳跃显示？属性配合使用技巧

很多人以为 start="5" 是跳过前 4 项、只渲染第 5 项开始的内容，其实完全不是——

A
B

渲染出来是 “5. A” 和 “6. B”，DOM 里仍是全部项，序号只是视觉偏移。想靠 start 实现 “1. 2. 5. 8.” 这类非连续编号，行不通。

常见错误现象：

CSS 计数器允许你手动指定每次递增多少，从而实现跳号（比如每次 +3）、倒跳（-2）、甚至条件性跳过某项。核心是把 counter-increment 的值设为非 1 的整数。

实操建议：

要实现 “1. 4. 7. 10.”：给 li 设 counter-increment: step 3;，并在 ol 上设 counter-reset: step 0;
想让某一项不参与编号（比如说明性条目），对该 li 设 counter-increment: step 0;，而不是用 display: none（隐藏仍会递增）
注意 counter-reset 的初始值是“递增前的值”，所以 counter-reset: step -1; + counter-increment: step 3; 第一项显示为 2，不是 1

示例片段：

ol { counter-reset: step -1; }
li { counter-increment: step 3; }
li::before { content: counter(step) ". "; }

value 是唯一能在 HTML 层面“硬设某一项编号”的属性，但它不是“跳号”，而是“重置链”。一旦用了

第七步

，后面所有 li 都会从 8 开始继续，不管前面是什么。

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

使用限制很明确：

start 和 CSS 计数器可以共存，但浏览器按不同机制解析：前者是 HTML 原生语义层行为，后者是样式层覆盖。这意味着：

当同时设置和 counter-reset: item 9;，两者效果一致（都从 10 开始），但若后续有 JS 修改 ol.start，CSS 计数器不会同步更新
在打印预览或高对比度模式下，部分屏幕阅读器可能只读取原生 start 值，而忽略 CSS 生成的 ::before 内容
reversed 与 CSS 计数器不联动：显示 “5. 4. 3.”，但如果你用计数器实现同样效果，得手动算好 counter-reset 初始值并反向递减