CSS计数器是一组用于控制数字生成顺序的CSS属性，这些属性可以按顺序对元素进行编号。通常，计数器用于列表和标题编号，但它们的用途远不止这些。它们包括以下属性：
1. counter-reset：此属性用于在指定元素上初始化计数器。它将计数器重置为默认值，通常是0或指定的数字。它的基本语法是"counter-reset: <counter-name> <integer>"，其中<counter-name>是你定义的计数器的名字，<integer>是计数器的初始值，如果不指定，默认为0。
2. counter-increment：此属性用于在指定元素上递增计数器。它的基本语法是"counter-increment: <counter-name> <integer>"，其中<counter-name>是你定义的计数器的名字，<integer>表示每次调用时计数器增加的数值，默认为1。
在实际应用中，我们可以在CSS中使用这些计数器的属性来实现复杂的布局和样式设计，比如有序列表、多级列表、注脚编号等。通过counter-reset属性，在父元素上设置计数器初始值，并通过counter-increment属性在子元素上逐个递增计数器。
例如，假设有如下HTML结构：
```html
<section>
<h1>标题一</h1>
<h1>标题二</h1>
<h1>标题三</h1>
</section>
```
可以使用以下CSS代码来为每个<h1>元素添加一个递增的编号：
```css
section {
counter-reset: section-counter; /* 在section元素上创建一个计数器，名为'section-counter'，并重置为0 */
}
h1 {
counter-increment: section-counter; /* 每个h1元素都将递增计数器'section-counter' */
}
h1::before {
content: counter(section-counter) ". "; /* 使用伪元素::before在每个h1元素前显示计数器的值，后跟一个点和空格 */
}
```
执行上述CSS代码后，<h1>元素前将显示1.、2.、3.等，每个数字都是递增的，实现了有序编号。
需要指出的是，<custom-ident>的语法规则允许计数器名称是a-z、0-9、下划线的组合，但不能是CSS的关键字，如none、unset、initial、inherit。在实际开发中，建议不要使用数字作为计数器名称，虽然技术上是可以的，但为了代码的可读性，使用描述性名称更有助于维护和理解。
虽然CSS计数器并不像其他CSS属性那样经常被使用，但它们在特定的布局任务中非常有用。对于刚接触CSS计数器的开发者来说，了解它们的基本概念和语法是提高CSS样式控制能力的关键一步。随着对CSS的深入学习，开发者可以将这些计数器应用到更复杂的设计中，比如在复杂的表格布局中自动编号，或者在生成目录和索引时使用计数器。因此，掌握CSS计数器相关属性对于提高前端开发技能是很有帮助的。
