纯HTML/CSS实现多页面章节标题自动编号问题求解

云原生阿岚

2026-7-6

纯CSS实现单页章节标题自动编号解决方案

核心思路

利用CSS计数器结合CSS变量/自定义属性，为每个独立页面的章节计数器设置起始值，全程无需JavaScript。

实现步骤

全局初始化计数器
在全局样式文件中定义章节计数器，默认从1开始，预留变量用于覆盖起始值：

/* 全局样式 */
body {
  /* 初始化章节计数器，默认起始值为1，可通过--section-start变量自定义 */
  counter-reset: section var(--section-start, 1);
}

/* 小节计数器（按需添加） */
h2 {
  counter-reset: subsection;
}

为单个页面设置起始编号
在每个章节页面的<head>中添加局部样式，通过CSS变量指定当前章节的起始编号：

<!-- 第3章的页面示例 -->
<head>
  <style>
    body {
      --section-start: 3;
    }
  </style>
</head>

或者用HTML属性传递值，配合attr()函数更直观：

<!-- 第3章的页面示例 -->
<body data-section="3">

对应的CSS调整：

body {
  --section-start: attr(data-section number, 1);
  counter-reset: section var(--section-start);
}

attr()后的number表示将属性值转为数字，第二个参数是默认值。

为标题添加编号前缀
通过伪元素将计数器值插入标题前：

/* 章节标题（h1） */
h1::before {
  counter-increment: section;
  content: counter(section) ". ";
}

/* 小节标题（h2，按需添加） */
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ". ";
}