通俗讲 CSS 计数器就是css定义的一个变量，这些变量根据 CSS 递增或递减规则跟踪使用次数。你可以自定义一个计数器，也可以修改 list-item默认生成的应用于所有有序列表的计数器。

要使用 CSS 计数器，我们将使用以下属性：

• counter-reset- 创建或重置计数器
• counter-increment- 增加一个计数器值
• content- 插入生成的内容
• counter()或counters()函数 - 将计数器的值添加到元素上

CSS 计数器可以让你根据内容在文档中的位置调整其显示的外观。例如，你可以使用计数器自动为网页中的标题编号，或者更改有序列表的编号。

创建或重置计数器

在使用 CSS 计数器前，首先要使用counter-reset 创建一个计数器变量。

使用 counter-reset 你可以创建或重置一个计数器变量，其语法如下：

counter-reset: counter-name;  counter-reset: counter-name -1;  counter-reset: counter1 1 counter2 4;  counter-reset: none;

计数器值变化

使用 counter-increment 属性你可以递增或递减计数器值，语法如下：

counter-increment: counter-name;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) ": ";}

效果：

nerror="javascript:errorimg.call(this);">

一个嵌套计数器的示例

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

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) " ";}

效果：

nerror="javascript:errorimg.call(this);">

如上示例，其中每个h1对应的计数器都会重置计数器值为0，这里要特别注意。

一个反向计数器的示例

html：

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

css：

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

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

nerror="javascript:errorimg.call(this);">

使用 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,".") " ";}

效果：

nerror="javascript:errorimg.call(this);">

注意这个示例和之前的嵌套计数器那个例子的区别，这里的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