CSS Counter-Reset：序号界的变形金刚，列表结构的百变星君
前端的世界，就像一个用代码堆砌起来的乐高王国，充满了惊喜和创造力。我们用HTML搭建骨架，用CSS赋予它色彩和灵魂，用JavaScript赋予它活力和互动。而在这其中，CSS不仅仅是美化工具，它还隐藏着许多强大的功能，等待我们去发掘。今天，我们要聊的就是CSS中一个略显低调，但功能强大的家伙：counter-reset。
听到“counter-reset”，你是不是觉得有点陌生？没关系，把它想象成一个序号界的变形金刚，或者列表结构的百变星君，瞬间就亲切多了。它能帮你自动生成复杂的序号，构建各种奇形怪状的列表结构，让你的页面瞬间逼格满满，告别手动编号的痛苦。
手动编号？No Way！
想象一下，你正在写一篇技术博客，内容结构复杂，包含多级标题、子标题、列表项等等。如果每个标题、每个列表项都手动编号，那简直是噩梦！稍微修改一下内容，所有的序号都要跟着调整，简直让人崩溃。这时候，counter-reset就闪亮登场了，它能帮你自动生成这些序号，解放你的双手，让你专注于内容创作。
counter-reset：初始化你的序号计数器
counter-reset的作用很简单，就是用来初始化一个或多个计数器。你可以把它想象成一个变量声明，只不过这个变量是用来计数的。它的语法如下：
counter-reset: [identifier] [integer] | none | inherit;- identifier: 计数器的名称，你可以随便起，只要符合CSS的命名规范就行。比如
section,chapter,item等等。 - integer: 计数器的初始值，默认为0。你可以设置成任何整数，比如1，-1，甚至100。
- none: 禁用计数器重置。
- inherit: 从父元素继承计数器重置。
举个例子：
body {
counter-reset: section; /* 初始化一个名为 section 的计数器，初始值为 0 */
}
h2 {
counter-increment: section; /* 每次遇到 h2 标签， section 计数器加 1 */
content: "Section " counter(section) ": "; /* 在 h2 标签前添加 "Section " + 计数器值 + ": " */
}这段代码的作用是，在每个<h2>标签前自动添加 "Section 1: ", "Section 2: ", "Section 3: " 这样的序号。是不是很简单？
counter-increment：让序号动起来
光有 counter-reset 还不够，你还需要 counter-increment 来让序号动起来。counter-increment 的作用是增加一个或多个计数器的值。它的语法如下：
counter-increment: [identifier] [integer] | none | inherit;- identifier: 要增加的计数器的名称，必须和
counter-reset中定义的名称一致。 - integer: 每次增加的值，默认为1。可以是任何整数，比如2，-1，甚至10。
- none: 禁用计数器增加。
- inherit: 从父元素继承计数器增加。
结合上面的例子，counter-increment: section; 的作用就是每次遇到<h2>标签，section 计数器的值就加 1。
counter()：把序号展示出来
有了计数器，还要把它展示出来才行。counter() 函数就是用来把计数器的值显示在页面上的。它的语法如下：
counter(name, style);- name: 计数器的名称，必须和
counter-reset中定义的名称一致。 - style: 序号的样式，可选值包括：
decimal(十进制，默认值),lower-roman(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写字母),upper-alpha(大写字母),armenian,georgian,cjk-ideographic,hebrew等等。
继续上面的例子，content: "Section " counter(section) ": "; 的作用就是在<h2>标签前添加 "Section " + section 计数器的值 (十进制) + ": "。
进阶用法：嵌套计数器，构建复杂的列表结构
counter-reset 真正的强大之处在于它可以嵌套使用，构建复杂的列表结构。比如，你可以用它来实现多级标题编号，就像下面这样：
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: chapter; /* 初始化 chapter 计数器 */
}
h2 {
counter-reset: section; /* 初始化 section 计数器 */
counter-increment: chapter; /* chapter 计数器加 1 */
}
h2::before {
content: counter(chapter) ". "; /* 在 h2 标签前添加 chapter 序号 */
}
h3 {
counter-increment: section; /* section 计数器加 1 */
}
h3::before {
content: counter(chapter) "." counter(section) " "; /* 在 h3 标签前添加 chapter.section 序号 */
}
</style>
</head>
<body>
<h2>Chapter 1</h2>
<h3>Section 1.1</h3>
<h3>Section 1.2</h3>
<h2>Chapter 2</h2>
<h3>Section 2.1</h3>
<h3>Section 2.2</h3>
</body>
</html>这段代码实现了二级标题的自动编号，<h2>标签显示 "1. ", "2. "，<h3>标签显示 "1.1 ", "1.2 ", "2.1 ", "2.2 "。
关键在于，我们在<h2>标签中也使用了 counter-reset: section;，这意味着每次遇到一个新的<h2>标签，section 计数器都会被重置为 0。这样，<h3>标签的序号才会从 1 开始计数。
你可以继续嵌套下去，实现三级、四级甚至更复杂的标题编号。只需要在相应的标签中初始化计数器，并用 counter() 函数显示出来即可。
更多有趣的例子：
-
自动生成任务列表：
<!DOCTYPE html> <html> <head> <style> ol { counter-reset: task; /* 初始化 task 计数器 */ } li::before { counter-increment: task; /* task 计数器加 1 */ content: counter(task) ". "; /* 在 li 标签前添加 task 序号 */ } </style> </head> <body> <ol> <li>Task 1</li> <li>Task 2</li> <li>Task 3</li> </ol> </body> </html>这段代码会自动为
<li>标签添加序号 "1. ", "2. ", "3. "。 -
自定义序号样式：
<!DOCTYPE html> <html> <head> <style> ol { counter-reset: item; /* 初始化 item 计数器 */ list-style-type: none; /* 隐藏默认的列表样式 */ } li::before { counter-increment: item; /* item 计数器加 1 */ content: "(" counter(item, lower-alpha) ") "; /* 在 li 标签前添加 (a), (b), (c) 序号 */ } </style> </head> <body> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html>这段代码使用小写字母作为序号，显示为 "(a) ", "(b) ", "(c) "。
-
模拟法律条文的编号：
<!DOCTYPE html> <html> <head> <style> body { counter-reset: article section subsection; /* 初始化 article, section, subsection 计数器 */ } .article { counter-increment: article; /* article 计数器加 1 */ } .article::before { content: "Article " counter(article) ". "; /* 在 article 标签前添加 Article 1. 序号 */ } .section { counter-increment: section; /* section 计数器加 1 */ } .section::before { content: "(" counter(section, upper-roman) ") "; /* 在 section 标签前添加 (I), (II), (III) 序号 */ } .subsection { counter-increment: subsection; /* subsection 计数器加 1 */ } .subsection::before { content: counter(subsection, decimal) ". "; /* 在 subsection 标签前添加 1. , 2. , 3. 序号 */ } </style> </head> <body> <div class="article"> <div class="section"> <div class="subsection">Subsection 1</div> <div class="subsection">Subsection 2</div> </div> <div class="section"> <div class="subsection">Subsection 1</div> <div class="subsection">Subsection 2</div> </div> </div> <div class="article"> <div class="section"> <div class="subsection">Subsection 1</div> <div class="subsection">Subsection 2</div> </div> </div> </body> </html>这段代码模拟了法律条文的编号方式，Article 使用数字，Section 使用罗马数字，Subsection 使用数字。
注意事项：
counter-reset和counter-increment必须配合content属性使用，才能将序号显示在页面上。counter-reset必须在父元素中定义，才能在子元素中使用。counter-reset可以重置多个计数器，用空格分隔即可。比如：counter-reset: section subsection;counter-increment也可以增加多个计数器，用空格分隔即可。比如：counter-increment: section 2 subsection -1;
总结：
counter-reset 是一个非常强大的CSS功能，它可以让你摆脱手动编号的痛苦，自动生成复杂的序号和列表结构。掌握了它，你的页面将会更加规范、美观，并且易于维护。下次你需要处理复杂的序号问题时，不妨试试 counter-reset，相信它会给你带来惊喜！
希望这篇文章能让你对 counter-reset 有更深入的了解，并能在实际项目中灵活运用它。记住，前端的世界充满了无限可能，不断学习和探索，你也能成为代码界的艺术家！