CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上，只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术，允许开发人员使用伪类:after、:before或者伪元素::after、::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽。如下图所示：

在线案例

这种技术令人有点困惑，因为他看起来不同于其他CSS属性，需要同时使用多个CSS属性。接下来与大家一起探讨如何使用这几个属性。

CSS Counters用到的属性

前面也提到过，使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成，他需要几个属性一起使用才会有效果。使用的到属性包括：

• **counter-reset**：此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义。
• **counter-increment**：用来标识计数器与实际相关联的范围。
• **content**：用来生成内容，其为:before、:after或::before、::after的一个属性。在生成计数器内容，主要配合counter()一起使用。
• **counter()**：该函数用来设置插入计数器的值。
• **:before**、**:after**或**::before**、**::after**：配合content用来生成计数器内容。

要想完全了解或者熟练使用好CSS Counters来创建计数器，就需要对用到的每个属性的使用规则有一定的了解。接下来就先简单的了解这几个属性。

counter-reset

语法规则

counter-reset:[ <identifier> <integer>? ]+ | none | inherit

取值说明

counter-reset的默认值为none，其主要取值包括两个部分：

• **identifier**：用来定义计数器的名称，这个名称可以自定义，如：item。而且后面可以紧跟一个整数值，中间用空格分隔开来，如headings 0；
• **integer**：此值用来设置调用计算数器时起始值，默认值为0。

功能描述

counter-reset主要功能用来标识计数器作用域，而且此值必须用在选择器上，必且是不能缺少的。共包括两个部分，第一个部分是自定义计数器名称，这一部分是必需的。第二部分是计数器起始值，此值是可选的。默认值为0。此值告诉标识组起始值是什么，所以说这个值非常有价值。因为，如果你设置的值为0，那么计数从1开始；如果你设置的值是-5，那么计数从-4开始。依此类推。

counter-reset自定义计数器名称时可以随意取名，但此名不能是CSS的关键词，比如none、inherit之类。

counter-reset属性可以包含一个或者多个计数器标识符，每个后面都可以跟一个整数值，如section 0 heading 0。如果元素都重置，并且增加一个计数器，计数器是第一次重置，后面值就会递增。如果不止一次指定同一个计算器，则将按指定的计数器做递增。

这里看上去难以理解，我们来看一个示例，对比其效果：

<div class="section">section1</div>
<div class="section">section2<