HTML有序列表设置不同序号实例-html教程-PHP中文网

ol标签原生不支持非递增跳跃编号，仅能通过value属性设置单项目起始值并保持后续递增，或用start与reversed控制起始和倒序；复杂需求须用css counter实现。

html有序列表设置不同序号实例

ol 标签本身不支持“为不同列表项设置完全独立、非递增的序号”，比如让第一项是 3、第二项是 100、第三项是 7——这种跳跃式编号违反语义，浏览器也不会按此渲染。真要实现，得靠 CSS counter 或手动写死，但会丢失可访问性。

用 `value` 属性跳过中间序号

如果只是想让某一项“从指定数字开始”，后续仍保持递增，value 是唯一原生方案。它只影响该 li 的显示编号，之后的项自动接续。

value 必须是整数，小数或负数会被忽略（如 value="2.5" 等效于 value="1"）
只对当前 li 生效，不影响前面的项
和 start 共存时，value 优先级更高

<ol>
<li>默认是 1</li>
  <li value="5">这里显示 5，下一项变成 6</li>
  <li>自动是 6</li>
  <li value="10">强行设为 10，下一项变成 11</li>
</ol>

用 `start` 和 `reversed` 控制起始与方向

start 设起始值，reversed 让编号倒着排，两者叠加能覆盖不少场景，比如“最新在前”的排行榜。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

reversed 只对 decimal（数字）类型生效；设了 type="a" 就失效
start="10" reversed 渲染为 10. 9. 8.，不是 10. 10. 10.
IE11 及更早版本不支持 start，会强制从 1 开始

<ol start="3" reversed>
<li>这是第 3 项（显示为 3）</li>
  <li>这是第 2 项（显示为 2）</li>
  <li>这是第 1 项（显示为 1）</li>
</ol>

用 CSS `counter` 完全接管编号逻辑

当需要字母+数字混合、带前缀（如 “Step-1”）、嵌套层级（1.1, 1.2）或跳变样式时，counter-reset + counter-increment + ::before 是唯一可靠路径。

必须加 list-style: none 关掉原生编号，否则会双编号
counter() 第二个参数支持 lower-alpha、upper-roman 等，比 HTML type 更全
嵌套时用 counters() 函数（注意末尾 s），例如 counters("section", ".")

<ol class="custom-counter">
<li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol><style>
.custom-counter {
  counter-reset: step;
  list-style: none;
}
.custom-counter li::before {
  counter-increment: step;
  content: "Step-" counter(step) ": ";
  font-weight: bold;
}
</style>