CSS counter 计数器

CSS Counter计数器自动编号无需JS：counter-reset命名计数器+初始值、counter-increment递增、counter()/counters(嵌套编号如1.1,1.2,1.2.1)、与::before/::after配合、自动编号目录/图题/章节 · 难度：入门 · +10XP

CSS Counter 计数器 —— 纯CSS自动编号

做目录、章节编号、有序列表自定义时，不需要JavaScript。CSS内置的计数器功能可以自动为元素编号。

基本三步

/* 步骤1：定义并初始化计数器 */
body {
  counter-reset: section;  /* 创建一个叫section的计数器，初始值0 */
}
/* 步骤2：每次遇到h2时递增 */
h2::before {
  counter-increment: section;              /* section计数器+1 */
  content: "第" counter(section) "章 ";    /* 显示"第1章"、"第2章"... */
}

嵌套编号

h2 {
  counter-reset: sub-section;  /* 每章重置小节编号 */
}
h3::before {
  counter-increment: sub-section;
  content: counter(section) "." counter(sub-section) " ";  /* "1.1"、"1.2" */
}

动手练习

1. 基础练习：做一个自动编号的章节标题——h2前面显示"第一章"、"第二章"...
2. 进阶应用：做一个嵌套编号的目录——1.1、1.2、2.1、2.2...
3. 项目实战：用CSS计数器给文章中的图表自动编号——"图1"、"图2"、"表1"、"表2"。