CSS 計數(shù)器（counter）是由 CSS 維護(hù)的變量，其主要用途是拗窃，可以通過指定的規(guī)則來計算節(jié)點元素的使用次數(shù)瞎领。
計數(shù)器的使用很簡單，分為以下三步：
- 初始化計數(shù)器随夸。
- 指定增量規(guī)則九默。
- 應(yīng)用計數(shù)器。
這三步分別對應(yīng)這計數(shù)器的三個屬性和方法：
counter-resetcounter-incrementcounter()/counters()
下面使用一個例子宾毒，來熟悉這些規(guī)則驼修。
首先，我們擁有一個如下的列表伍俘。
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
接下來我們使用計數(shù)器來為這個列表前面加上序號，使它呈現(xiàn)為下面這個樣子勉躺。
很簡單癌瘾，如前面所述，三步走：
第一步饵溅，初始化計數(shù)器妨退。我們使用 counter-reset 操作，這個屬性可以接受兩個值為一組的多組屬性值蜕企，第一個值咬荷，我們?yōu)橛嫈?shù)器起個名字，第二個值轻掩，我們指定該計數(shù)器的初始值幸乒。
counter-reset: custom-name integer;
第一個計數(shù)器的名稱必須由字母、數(shù)字唇牧、下劃線罕扎、中劃線組成聚唐，且第一個字符必須為字母。第二個為整數(shù)腔召，可以為負(fù)值杆查，默認(rèn)值為0.一般情況下我們把它定義在它的父元素上。
此屬性可以指定多組臀蛛，代表多個計數(shù)器亲桦，例如：
counter-reset: counter1 counter2 1 counter3 -2;
上面的規(guī)則定義了三個計數(shù)器，第一個名稱為 counter1 初始值為 0浊仆，第二個 counter2 初始值為1客峭，第三個counter3 初始值為 -2。
所以回到上面的例子氧卧，我們的列表要從1開始桃笙，所以，我們可以如下定義：
ul {
counter-reset: items 0; /* 0 可以省略 */
}
初始化之后沙绝，第二步搏明，指定計數(shù)器增量規(guī)則。我們使用 counter-increment 來實現(xiàn)這個目的闪檬，這個屬性的值和前面的 counter-reset 十分類似星著，同樣是由兩個值組成的多組值，第一個值同樣是由 counter-reset 初始化好的計數(shù)器名稱粗悯，第二個值為該計數(shù)器的增量虚循，默認(rèn)值為 1.
counter-increment: counter-name integer;
舉例，針對上面的三個計數(shù)器样傍，我們分別為它們指定不同的增量規(guī)則：
counter-increment: counter1 counter2 -1 counter3 2
我們?yōu)?counter1 沒有指定增量横缔，所以它會按照默認(rèn)值 1 遞增，counter2 按 1 遞減衫哥，counter3 按 2 遞增茎刚。
再次回到我們的例子，我們?yōu)橐呀?jīng)初始化好的 items 計數(shù)器指定以 1 遞增的增量規(guī)則：
li {
counter-increment: items 1; /* 1 同樣可以省略 */
}
很簡單吧撤逢，接下來就是第三步膛锭，應(yīng)用我們指定好的計數(shù)器。一般來說蚊荣，計數(shù)器常用于自動生成列表項的遞增規(guī)則初狰，所以經(jīng)常在偽類元素的 content 屬性中使用它，同樣互例，我們需要一個 counter() 函數(shù)的幫助來將相應(yīng)計數(shù)器注入 content 屬性中奢入，我們把計數(shù)器的名稱傳入到此函數(shù)可以完成應(yīng)用。并且可以定制更個性化的計數(shù)規(guī)則媳叨。直接上例子：
li:before {
content: counter(items) '. ';
}
這樣俊马，我們就為三個列表項前面添加了‘1. 2. 3.’的計數(shù)規(guī)則丁存。另外，counter() 方法可以指定第二個參數(shù)柴我，來約束計數(shù)器的顯示規(guī)則解寝，例如指定為 lower-roman，則它會按照小寫羅馬數(shù)字的形式遞增：⑺胰濉ⅱⅲⅳ···聋伦，至于這個值可以取什么值，其實就是 list-style-type` 可以取的值它都可以界睁。
需要注意的是觉增，除了初始化操作，其它兩項操作必須要指定在相應(yīng)的列表項上才能生效翻斟。
計數(shù)器嵌套
計數(shù)器特別強(qiáng)大的一點是逾礁，在一個嵌套的列表項，它會為內(nèi)層的子元素自動添加計數(shù)器访惜，我們可以在使用計數(shù)器的時候嘹履，應(yīng)用 counters() 函數(shù)的第二個參數(shù)來指定子項的連接符。例如：
content: counters(counter-name, '-');
在以上規(guī)則中债热，列表的子項會呈現(xiàn)為‘1-1砾嫉， 1-2， 1-3’這樣的形式窒篱。上例子：
<!-- html -->
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
<!-- css -->
ul {
counter-reset: content;
list-style-type: none;
}
ul li:before {
counter-increment: content;
content: counters(content, "-") ". ";
}
它呈現(xiàn)出來的效果如下圖：
以上就是對 CSS 計數(shù)器的簡單介紹焕刮。你可以看張鑫旭大神的這篇查看更詳細(xì)生動的介紹。
