很早以前,計數器僅存在於ul,ol等元素中,如何想給其餘元素增長計數,就只能經過list-style-image,或者background-image來實現。不過如今css3增長了counter屬性,能夠實現任何元素的計數做用。不過這個counter屬性還須要配合其餘css屬性一塊兒纔能有效果。css
首先, counter-reset 主要功能是用來標識計數器的做用域的。它只能做用於選擇器上,它的值包括兩部分:第一部分爲計數器的名字;第二部分爲計數器的起始值(默認爲0),counter-reset還能夠同時聲明多個計數器好比:html
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),好比:css3
counter-increment: count 1 /*代表每次遞增 1*/ counter-increment:count 2 /*代表每次遞增 2*/
最後一個,content和counter搭配使用,content主要是跟 :after, :before,::after,::before來搭配用的,counter主要是給元素插入計數器的值。htm
總體例子以下:blog
<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)"、"; }
效果圖以下:作用域