CSS的计数器：counter-increment与counter-reset

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

。如果元素都重置，并且增加一个计数器，计数器是第一次重置，后面值就会递增。如果不止一次指定同一个计算器，则将按指定的计数器做递增。
 

counter-increment

语法规则

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

取值说明

默认值为

none

。其值也包括两个部分：

•  

  **identifier**

  ：计数器名称，就调用

  counter-reset

  声明的计数器的标识符。
•  

  **integer**

  ：一个整数值，指定计数起始值。其值允许是0或者负整数值，如果未指定任何值，则该值为1（前提是

  counter-reset

  未显式设置计数的起始值）。其值递增是按倍数值递增，如果设置了值为2,后面元素递增值为4、6、8，依此类推。

功能描述

counter-increment

属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的，获取

counter-reset

定义的标识符。

counter-ncrement

第二个值是一个可选值，是一个整数值，可以是正整数，也可以是负整数。主要用来预设递增的值，如果取值为负值时，表示递减。默认值为

1

。

content

content

是和伪类

:before

、

:after

或者伪元素

::before

、

::after

配合在一起使用，主要功能用来生成内容。有关于

content

详细介绍，此处不做过多阐述，感兴趣的同学可以阅读 Divya Manian写的《 CSS Generated Content Techniques》一文。

在本文中所涉及到的内容，

content

属性主要与

counter([
  
  
  
   
   
   ])
  
  
  

配合使用，用来生成计数器值,如：

h2{
  counter-increment: section;

  &:before{
    content:"Chapter" counter(Chapter) "." counter(section);
  }
}

counter()

counter()

是一个函数，其主要配合

content

一起使用。使用

counter()

来调用定义好的计数器标识符。

counter()

函数接受两个参数，而且两参数之间使用逗号(

,

)来分隔。第一个参数是

counter-increment

定义的属性值

,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格，有点类似于

list-style-type

。默认情况之下取值为十制，但你也可以重置这个样式风格，比如

upper-roman

或者

upper-alpha

等。

counter()

函数第二个值与列表中的

list-style-type

值相等：

•  disc
•  circle
•  square
•  decimal
•  decimal-leading-zero
•  lower-roman
•  upper-roman
•  lower-greek
•  lower-latin
•  upper-latin
•  armenian
•  georgian
•  lower-alpha
•  upper-alpha
•  none
•  inherit

同样的，可以使用多个

counter()

，如：

content: counter(Chapter,upper-roman) "-" counter(section,upper-roman);

。

注：定义reset要在元素之前定义，部分安桌机设置默认值无效！！！

在线案例1

在线案例2

转载请注明：前端录»CSS的计数器：counter-increment与counter-reset