如何实现有序列表（ol）的自动连续编号？

方法一：使用CSS计数器（推荐） #

通过CSS的计数器特性可以实现动态连续编号，无需手动维护start属性，添加或删除列表项时编号会自动更新。

代码示例：

<style>
  /* 全局初始化计数器 */
  body {
    counter-reset: global-list;
  }
  /* 每个列表项递增计数器 */
  ol li {
    counter-increment: global-list;
  }
  /* 隐藏默认编号，自定义编号样式 */
  ol {
    list-style: none;
    padding-left: 2em;
    position: relative;
  }
  /* 生成连续编号 */
  ol li::before {
    content: counter(global-list) ".";
    position: absolute;
    left: 0;
  }
</style>

<!-- 独立的章节与列表 -->
<h2>I. Introduction</h2>
<ol>
  <li>Introduction 1</li>
  <li>Introduction 2</li>
</ol>

<h2>II. Services</h2>
<ol>
  <li>Services 1</li>
  <li>Services 2</li>
</ol>

方法二：调整HTML结构 #

若允许修改HTML层级，可将所有内容整合进同一个<ol>，用嵌套结构实现章节分组，默认就能保持连续编号。

代码示例：

<ol>
  <li>
    <strong>I. Introduction</strong>
    <ol>
      <li>Introduction 1</li>
      <li>Introduction 2</li>
    </ol>
  </li>
  <li>
    <strong>II. Services</strong>
    <ol>
      <li>Services 1</li>
      <li>Services 2</li>
    </ol>
  </li>
</ol>

说明 #

• 方法一优势是保留HTML结构独立性，每个章节的<ol>可单独存在，编号完全由CSS动态维护，新增章节或列表项时无需修改任何属性。
• 方法二更符合语义化规范，但需要调整原有结构，适合允许修改HTML层级的场景。

内容的提问来源于stack exchange，提问作者Bikas Lin