css3的counter的用法

很早以前，計數器僅存在於ul，ol等元素中，如何想給其餘元素增長計數，就只能經過list-style-image，或者background-image來實現。不過如今css3增長了counter屬性，能夠實現任何元素的計數做用。不過這個counter屬性還須要配合其餘css屬性一塊兒纔能有效果。

首先， counter-reset 主要功能是用來標識計數器的做用域的。它只能做用於選擇器上，它的值包括兩部分：第一部分爲計數器的名字；第二部分爲計數器的起始值（默認爲0），counter-reset還能夠同時聲明多個計數器好比：

 counter-reset: count 0  /*標識計數器count從1開始*/

 counter-reset: count2 2 /*標識計數器count2 從3開始*/

 counter-reset: count1 0 count3 0 count4 0 /*聲明瞭三個計數器，count1，count2，count3*/

　　

counter-increment 代表計數器實際用到的範圍 。他的值也包括兩部分：第一個爲計數器的名字，即counter-reset設置好的名字，第二個值標識遞增的值（默認爲1），好比：

counter-increment: count 1 /*代表每次遞增 1*/
    
counter-increment：count 2 /*代表每次遞增 2*/ 

　　

最後一個，content和counter搭配使用，content主要是跟 :after, :before,::after,::before來搭配用的，counter主要是給元素插入計數器的值。

總體例子以下：

 

<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>

　　

dl { counter-reset:test1 0;}
dt { counter-increment: test1; counter-reset: test2 0;}
dt:before{ content:counter(test1)"、";}
dd{ counter-increment:test2;}
dd:before{
   content:counter(test1)"-"counter(test2)"、";
 }

　　效果圖以下：