• 一、使用css属性：
  • 1.counter
  • 2.content-reset
  • 3.counter-increment
• 二、使用方法
  • 1.使用计数器
  • 2.计数器嵌套

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。

计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

一、使用css属性：

1.counter

2.content-reset

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。 利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。 注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。

3.counter-increment

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。 利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。 注释：如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。

二、使用方法

1.使用计数器

使用CSS计数器之前，必须重置一个值，默认是0。使用counter()函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 “Section <计算器值>:"。

body {
  counter-reset: section;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: section;      /* 增加计数器值 */
  content: "Section " counter(section) ": "; /* 显示计数器 */
}

2.计数器嵌套

CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：

ol {
  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
}