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主要是給元素插入計數器的值。

整體例子如下：

example

example2

dt dt:before

dddd:before

效果圖如下：