CSS 裡面的偽元素其實是非常好用的，但常常容易被大家忽略，偽元素裡面常用到的content 屬性，可能現在很多人只是以為content 屬性的值只支援字串，除了字串外常用到的還有uri、counter ，今天要介紹的就是conter(計數器)。
CSS 中的計數器類似於變量，可以實現簡單的計數功能，並將結果顯示在頁面上，在早期的網站上應用比較廣泛。要實作計數器需要用到以下幾個屬性：
下面我們就來看看CSS 中的計數器是如何使用的。
1. 使用計數器自動編號
CSS計數器會根據規則來遞增變數。
CSS計數器使用到以下幾個屬性：
（1）counter-reset:name1 name2 建立或重置計數器（可以同時定義多個計數器，中間用空格隔開）
（2）counter-increment:name step 遞增變數（可以遞增一個或多個）
（3）content:counter(name) 插入產生的內容（使用偽元素before/after）
（4）counter()或counters()函數將計數器值加到元素
建立計數器時，必須在該標籤的前一個標籤或是父標籤裡創建，如果定義在自己標籤內是無效的。
具體應用：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Dotcpp程式設計</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*先設定步長*/counter-increment:counter11;content:'第'counter(counter1)'篇';}p::before{/*先設定步長*/counter-increment:counter21;content :'第'counter(counter1)'段';}</style></head><body><div><h2></h2><p></p><p></p><p ></p><h2></h2><p></p><p></p><p></p><p></p></div></body></ html>運行結果：
2. 初始化計數器
要使用計數器首先需要使用counter-reset 屬性來建立一個計數器，這個過程便叫做初始化計數器。 counter-reset 屬性的語法格式如下：
counter-reset：none|[<identifier><integer>]
參數說明如下：
（1）none：阻止計數器重設；
（2）<identifier>：定義計數器的名稱；
（3）<integer>：定義計數器的起始值，預設值為0，可以為負值。
3.計數器自增
初始化計數器後，可以透過counter-increment 屬性來指定計數器何時自增，語法格式如下：
counter-increment：none|[<identifier><integer>]
參數說明如下：
（1）none：阻止計數器增加；
（2）<identifier>：定義要自增的計數器名稱；
（3）<integer>：定義計數器每次增加的數值，預設值為1，可以為負值。
4.顯示計數器
最後，就是如何顯示計數器了。若要顯示計數器您可以使用counter() 或counters() 函數，這兩個函數的語法格式如下：
counter(name)counters(name,string,list-style-type)
參數說明如下：
（1）name：計數器的名稱；
（2）string：當計數器嵌套使用時，用來拼接的字串；
（3）list-style-type：計數器顯示的風格，可以是CSS 中允許的任何《list-style-type 屬性》的值。
下面透過一個簡單的範例來示範計數器的使用：
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- increment:section;}h5:before{content:Chaptercounter(chapter).;}h6:before{content:counter(chapter).counter(section);}</style></head><body><h5>第一章</h5><h6>第一節</h6><h6>第二節</h6><h6>第三節</h6><h6>第四節</h6><h5>第二章</h5><h6>第一節</h6><h6>第二節</h6><h6>第三節</h6><h6>第四節</h6></body> </html>運行結果：
5.計數器嵌套
另外，計數器也可以嵌套使用，而且使用counters() 函數可以在不同層級的巢狀計數器之間插入一個字串，如下例所示：
<!DOCTYPEhtml><html><head><style>ol{/*為每個ol元素建立新的計數器實例*/counter-reset:ol-list;list-style-type:none;}li:before{ /*只增加計數器的目前實例*/counter-increment:ol-list;/*為所有計數器實例增加以「.」分隔的值*/content:counters(ol-list,.)、;}</style ></head><body><ol><li>卷</li><li>章<ol><li>節</li><li>節</li><li>節<ol>< li>小節</li><li>小節</li></ol></li><li>節<ol><li>小節</li><li>小節</li><li>小節</li></ol></li></ol></li><li>章</li><li>章</li></ol></body></html>運行結果：
