通俗讲 CSS 计数器就是css定义的一个变量，这些变量根据 CSS 递增或递减规则跟踪使用次数。你可以自定义一个计数器，也可以修改 list-item默认生成的应用于所有有序列表的计数器。
要使用 CSS 计数器，我们将使用以下属性：
- counter-reset- 创建或重置计数器
- counter-increment- 增加一个计数器值
- content- 插入生成的内容
- counter()或counters()函数 - 将计数器的值添加到元素上
CSS 计数器可以让你根据内容在文档中的位置调整其显示的外观。例如，你可以使用计数器自动为网页中的标题编号，或者更改有序列表的编号。
创建或重置计数器
在使用 CSS 计数器前，首先要使用counter-reset 创建一个计数器变量。
使用 counter-reset 你可以创建或重置一个计数器变量，其语法如下：
/*定义一个名为‘counter-name’的计数器，且默认值为0*/
counter-reset: counter-name;
/*定义一个名为‘counter-name’的计数器，且默认值为-1*/
counter-reset: counter-name -1;
/*定义多个计数器，分别是counter1、counter2，其默认值分别是1、4*/
counter-reset: counter1 1 counter2 4;
/*不使用计数器*/
counter-reset: none;计数器值变化
使用 counter-increment 属性你可以递增或递减计数器值，语法如下：
/*默认每次递增1*/
counter-increment: counter-name;
/*每次递增-1*/
counter-increment: counter-name -1;
/*同时定义多个计数器的递增或递减值*/
counter-increment: counter 1 counter2 -4;
/*不递增或递减*/
counter-increment: none;显示计数器值
要想在页面中显示计数器值，必须要在content属性中使用counter()或counters()函数，通常content属性又和::before、::after等伪元素一起使用。
counter()语法：
/*基础用法*/
counter(countername)
/*第二个参数是数字，字母或符号的简单预定义计数器样式*/
counter(countername,upper-roman)counters() 函数常用于嵌套元素的计数，注意和counter()函数的区别.
counters()语法：
/*注意第二个参数指分隔符*/
counters(countername, '-');
/*注意第三个参数指预定义的关键字，比如大小写罗马字母、数字或符号*/
counters(countername, '.', upper-roman)反向计数器
反向计数器是一种用于递减（而非递增）的计数器。反向计数器可以通过在 counter-reset 属性中将计数器的名称用 reversed() 函数包裹来创建的。
反向计数器的默认初始值与元素的数量相同（不同于常规的默认初始值为 0 的计数器）。
语法如下：
counter-reset: reversed(section);注意： 对于非反向计数器，你也仍然可以使用 counter-increment 属性实现递减。使用反向计数器的优点在于：其默认初始值可以自动根据元素数量生成，自动应用于有序列表的 list-item 计数器也可以借此反转编号。
一个计数器自动编号的示例
下面的示例将创建一个计数器，然后每个
元素的计数器值递增1，并在每个 元素的开头添加“Section <计数器的值>：”，如下代码：
html：
Using CSS Counters
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
Python Tutorial
SQL Tutorial
css：
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}效果：
一个嵌套计数器的示例
有时我们需要制作一个类似目录的效果，这时可以使用多个计数器来实现，如下示例：
html：
HTML/CSS Tutorials
HTML
CSS
Bootstrap
W3.CSS
Scripting Tutorials
JavaScript
jQuery
React
Programming Tutorials
Python
Java
C++
css：
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}效果：
如上示例，其中每个h1对应的计数器都会重置计数器值为0，这里要特别注意。
一个反向计数器的示例
html：
Introduction
Body
Conclusion
css：
/* 创建一个反向计数器变量 section */
body {
counter-reset: reversed(section);
}
h3::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}如果你的浏览器支持 reversed() 函数，其结果就会类似于这样：
使用 counters()在多级嵌套元素上创建计数器
这里使用了有序列表,使用
- 元素创建的有序列表，会自动应用名为 list-item 的计数器。
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
html:
css
ol {
counter-reset: section;
list-style-type: circle;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}效果：
注意这个示例和之前的嵌套计数器那个例子的区别，这里的html结构是嵌套的父子结构，之前的那个示例html元素是同级的，这就是counters()函数和counter()函数的区别。
总结
css 计数器在制作目录或一些按指定序列排列的效果时非常有用，css计数器目前一般都是和content属性结合使用。注意反向计数器目前并不是所有浏览器都支持，使用时注意兼容性。
感谢您的关注，欢迎指正、补充。
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
https://www.w3schools.com/css/css_counters.asp
http://t.zoukankan.com/yangyang63963-p-5922002.html