通俗讲 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 计数器也可以借此反转编号。

一个计数器自动编号的示例

下面的示例将创建一个计数器，然后每个 <h2> 元素的计数器值递增1，并在每个 <h2> 元素的开头添加“Section <计数器的值>：”，如下代码：

html：

<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>

css：

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

效果：

一个嵌套计数器的示例

有时我们需要制作一个类似目录的效果，这时可以使用多个计数器来实现，如下示例：

html：

<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>

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：

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

css：

  /* 创建一个反向计数器变量 section */
body {
  counter-reset: reversed(section); 
}
h3::before {
  counter-increment: section -1; 
  content: "Section " counter(section) ": "; 
}

如果你的浏览器支持 reversed() 函数，其结果就会类似于这样：

使用 counters()在多级嵌套元素上创建计数器

这里使用了有序列表,使用 <ol> 元素创建的有序列表，会自动应用名为 list-item 的计数器。

html:

<ol>
  <li>item</li>
  <li>item   
        <ol>
          <li>item</li>
          <li>item</li>
          <li>item
                <ol>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                </ol>
          </li>
          <li>item</li>
        </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

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