counter-reset 用于创建或重置计数器，通常在父元素上初始化，配合 counter-increment 实现自动编号。通过在多级结构中合理设置 counter-reset，可实现章节、小节等嵌套编号，如“1.1, 1.2, 2.1”，关键在于父级递增时重置子级计数器，确保编号独立。
counter-reset在 CSS 中主要用于创建一个新的计数器实例，或者将一个已存在的计数器重置为特定值（默认为0）。它的核心作用是为我们提供一个起点，让后续的
counter-increment能在此基础上进行累加，从而实现各种复杂的自动编号效果，比如章节、列表、步骤等，极大地简化了结构化内容的编号管理。
解决方案
在使用
counter-reset时，我们通常将其放置在父元素上，或者说是你希望计数器开始或重置的那个元素上。它的基本语法是
counter-reset: <counter-name> <value>;。
<counter-name>是你自定义的计数器名称，而
<value>则是你希望计数器初始化时的整数值。如果不指定
<value>，它默认就是0。
举个例子，如果你想给一个文档的章节进行编号，你可能会在
body或一个
section元素上设置
counter-reset: chapter;。这意味着，每当浏览器遇到这个元素时，名为
chapter的计数器就会被设置为0。接着，在每个
h2标签前，你就可以使用
counter-increment: chapter;来让
chapter计数器递增，并通过
content: counter(chapter) ". ";将其显示出来。
一个比较容易被忽视但非常强大的特性是，你可以在同一个
counter-reset声明中初始化多个计数器，例如
counter-reset: chapter 1 section 0;。这允许你在一个层级上同时管理多个计数器的状态，这对于多级编号系统尤其有用。
立即学习“前端免费学习笔记（深入）”；
我个人觉得，
counter-reset的精妙之处在于它提供了一种“作用域”的概念。当你在一个元素上设置了
counter-reset，它的子元素就可以访问和操作这个计数器。当子元素内部又设置了同名的
counter-reset时，会创建一个新的、独立的计数器实例，而不会影响到父级。这种层级关系的管理，是实现复杂编号逻辑的关键。
/* 示例：简单的章节编号 */
body {
counter-reset: chapter; /* 初始化一个名为 'chapter' 的计数器，默认值为0 */
}
h2::before {
counter-increment: chapter; /* 每次遇到h2，chapter计数器加1 */
content: "Chapter " counter(chapter) ". "; /* 显示章节号 */
font-weight: bold;
}
/* 示例：多级列表编号 */
.my-list {
counter-reset: item; /* 为整个列表初始化计数器 */
}
.my-list li {
counter-increment: item; /* 每个列表项递增 */
}
.my-list li::before {
content: counter(item) ". ";
font-weight: normal;
margin-right: 5px;
}如何利用 counter-reset
实现多级嵌套内容的自动编号？
这确实是
counter-reset最能体现其价值的场景之一。想象一下，你有一个文档，里面有章节、小节，甚至更小的点。如果手动编号，那简直是噩梦，改动一点点就得全盘重来。
counter-reset和
counter-increment配合，能完美解决这个问题。
关键在于理解计数器的“作用域”和“层叠”行为。当你在一个父元素上设置
counter-reset: section;，然后在其子元素（比如
h3）上使用
counter-increment: section;，它会递增父级定义的那个
section计数器。但如果你在子元素 内部 又设置了
counter-reset: subsection;，甚至在另一个
div里面又
counter-reset: section;，那么就会创建一个 新的 计数器实例。
我们来看一个常见的模式：章节-小节编号。
<section>
<h2>第一章</h2>
<p>这是第一章的内容。</p>
<section>
<h3>1.1 小节</h3>
<p>这是第一章第一小节的内容。</p>
</section>
<section>
<h3>1.2 小节</h3>
<p>这是第一章第二小节的内容。</p>
</section>
</section>
<section>
<h2>第二章</h2>
<p>这是第二章的内容。</p>
<section>
<h3>2.1 小节</h3>
<p>这是第二章第一小节的内容。</p>
</section>
</section>为了给这个结构编号，CSS 可以这样写：
body {
counter-reset: chapter; /* 全局初始化章节计数器 */
}
section h2::before {
counter-increment: chapter; /* 章节计数器递增 */
counter-reset: section; /* 每次新章节开始，小节计数器重置为0 */
content: counter(chapter) ". ";
font-weight: bold;
}
section h3::before {
counter-increment: section; /* 小节计数器递增 */
content: counter(chapter) "." counter(section) " "; /* 显示章节和小节号 */
font-weight: normal;
}这里，
section h2::before中的
counter-reset: section;是关键。它确保了每当一个新的
h2出现时，
section计数器都会被重置为0，从而实现“1.1, 1.2, 2.1, 2.2”这样的效果，而不是“1.1, 1.2, 1.3, 1.4”。这种“父级递增，子级重置”的模式，是处理多级编号的黄金法则。我记得我第一次用的时候，就觉得这东西简直是为结构化文档量身定制的，省了多少手动修改的功夫。
counter-reset
与 counter-increment
配合使用时有哪些常见误区和最佳实践？
这块内容我觉得挺重要的，因为我见过不少人在用计数器的时候踩坑。
常见误区：
-
忘记初始化或重置： 最常见的问题就是只用了
counter-increment
而没有counter-reset
。这样计数器就永远不会归零，导致编号从上次结束的地方继续，或者根本不显示（因为没有初始化）。另一个是忘记在需要的时候重置，比如新章节开始时，小节编号没有重置。这通常会导致编号混乱，比如“1.1, 1.2, 1.3, 2.4, 2.5”这种错误。 -
作用域理解不清： 有时会在一个不恰当的元素上设置
counter-reset
，导致计数器在不该重置的地方重置了，或者在需要重置的地方没有重置。记住，counter-reset
影响的是其自身及其后代元素。如果你在ul
上设置了counter-reset: item;
，那么li
内部的counter-increment
会递增这个item
。但如果你在每个li
上都设置counter-reset: item;
，那每个li
的编号都会从1开始，这显然不是我们想要的。 -
显示计数器时机不当：
content: counter(name);
应该放在你希望显示编号的伪元素（::before
或::after
）上。如果你尝试在其他地方直接使用，那肯定是不行的。
最佳实践：
-
明确初始化位置： 始终在最外层（如
body
或顶层容器）初始化你的主计数器。对于子级计数器，在父级元素每次“开始”时进行重置。比如，章节计数器在body
初始化，小节计数器在每个h2
元素（或其伪元素）上重置。 -
语义化命名计数器： 使用有意义的名称，如
chapter
,section
,item
等，而不是c1
,c2
。这让你的代码更易读、易维护。 -
利用伪元素： 编号通常通过
::before
或::after
伪元素来插入，这样可以保持文档结构干净，内容与样式分离。 -
调试技巧： 如果编号出现问题，可以尝试在开发者工具中检查元素的计算样式，看看
counter-reset
和counter-increment
是否按预期生效。有时候，一个简单的display
属性（比如display: block
或display: inline-block
）可能会影响伪元素的渲染。 -
多计数器管理： 如果需要同时管理多个计数器，可以在同一个
counter-reset
声明中列出它们，例如counter-reset: chapter 1 section 0;
。这样可以减少代码行数，也更清晰。
我觉得最重要的是，把计数器想象成一个变量。
counter-reset就是给这个变量赋值，
counter-increment就是让它加1。理解了这一点，很多问题就迎刃而解了。
counter-reset
在实际网页设计中还有哪些创新或不常见的应用场景？
除了传统的文档编号，
counter-reset的灵活性其实给了我们很多发挥空间。它不只是一个简单的数字累加器，更是一个状态管理工具。
-
自定义进度指示器： 想象一个多步骤的表单或教程，你可能想在每个步骤的标题前显示“步骤1”、“步骤2”这样的编号，同时在侧边栏有一个总的进度条。
counter-reset
可以用来标记总步骤数，而counter-increment
则可以用来
