CSS3 counter計數器

counter函數

它一般與僞元素一塊兒使用，但理論上能夠在支持值的任何地方使用

返回值

指定計數器當前的值

用法

counter(countername)

計數器的名字經過屬性counter-increment，counter-reset定義。

counter-increment屬性

它的值包括兩部分：第一個爲計數器的名字，第二個值標識遞增的值（默認爲1），好比：

counter-increment：count 1  /*每次遞增1*/

counter-increment：count 2  /*每次遞增2*/

counter-reset屬性

它的值包括兩部分：第一部分爲計數器的名字；第二部分爲計數器的起始值（默認爲0），好比：

counter-reset：count 0 /*從1開始計數*/

counter-reset：count 2 /*從3開始計數*/

counter-reset：count1 0 count2 1 count3 2/*聲明瞭三個計數器count1，count2，count3*/

與content搭配使用

content主要是跟 :after, :before,::after,::before來搭配用的。

：after{

　　content：conter(count)

}

總體例子

html：

<dl>

  < dt >example</ dt >

 < dd >example</ dd >

  < dd >example</ dd >

  < dd >example</ dd >

  < dt >example2</ dt >

  < dd >example2</ dd >

 < dd >example2</ dd >

 < dd >example2</ dd >

  < dd >example2</ dd >

</ dl >

css：

dl {  counter-reset :test 1  0 ;}

dt {  counter-increment : test 1 ;  counter-reset : test 2  0 ;}

dt:before{  content : counter (test 1 ) "、" ;}

dd{  counter-increment :test 2 ;}

dd:before{

  content : counter (test 1 ) "-" counter (test 2 ) "、" ;

}

 

效果以下：