CSS 計數(shù)器簡介
?
2018.04.07 12:54?字數(shù) 1113?閱讀 10評論 0喜歡 0
CSS 計數(shù)器（counter）是由 CSS 維護的變量吏够，其主要用途是佣耐，可以通過指定的規(guī)則來計算節(jié)點元素的使用次數(shù)驼修。
計數(shù)器的使用很簡單，分為以下三步：
初始化計數(shù)器瓤漏。
指定增量規(guī)則扰付。
應(yīng)用計數(shù)器。
這三步分別對應(yīng)這計數(shù)器的三個屬性和方法：
counter-reset
counter-increment
counter()/counters()
下面使用一個例子纯续，來熟悉這些規(guī)則随珠。
首先，我們擁有一個如下的列表猬错。
- 第一項
- 第二項
- 第三項
接下來我們使用計數(shù)器來為這個列表前面加上序號窗看，使它呈現(xiàn)為下面這個樣子。
counter example
很簡單倦炒，如前面所述显沈，三步走：
第一步，初始化計數(shù)器析校。我們使用?counter-reset?操作构罗，這個屬性可以接受兩個值為一組的多組屬性值铜涉，第一個值，我們?yōu)橛嫈?shù)器起個名字遂唧，第二個值芙代，我們指定該計數(shù)器的初始值。
counter-reset:custom-nameinteger;
第一個計數(shù)器的名稱必須由字母盖彭、數(shù)字纹烹、下劃線、中劃線組成召边，且第一個字符必須為字母铺呵。第二個為整數(shù)，可以為負值隧熙，默認值為0.一般情況下我們把它定義在它的父元素上片挂。
此屬性可以指定多組，代表多個計數(shù)器贞盯，例如：
counter-reset:counter1counter21counter3-2;
上面的規(guī)則定義了三個計數(shù)器音念，第一個名稱為 counter1 初始值為 0，第二個 counter2 初始值為1躏敢，第三個counter3 初始值為 -2闷愤。
所以回到上面的例子，我們的列表要從1開始件余，所以讥脐，我們可以如下定義：
ul{counter-reset: items0;/* 0 可以省略 */}
初始化之后，第二步啼器，指定計數(shù)器增量規(guī)則旬渠。我們使用?counter-increment?來實現(xiàn)這個目的，這個屬性的值和前面的?counter-reset?十分類似镀首，同樣是由兩個值組成的多組值坟漱，第一個值同樣是由?counter-reset?初始化好的計數(shù)器名稱，第二個值為該計數(shù)器的增量更哄，默認值為 1.
counter-increment:counter-nameinteger;
舉例芋齿，針對上面的三個計數(shù)器，我們分別為它們指定不同的增量規(guī)則：
counter-increment:counter1counter2-1counter32
我們?yōu)?counter1 沒有指定增量成翩，所以它會按照默認值 1 遞增觅捆，counter2 按 1 遞減，counter3 按 2 遞增麻敌。
再次回到我們的例子栅炒，我們?yōu)橐呀?jīng)初始化好的 items 計數(shù)器指定以 1 遞增的增量規(guī)則：
li{counter-increment: items1;/* 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ù)器特別強大的一點是蝗罗，在一個嵌套的列表項，它會為內(nèi)層的子元素自動添加計數(shù)器蝌戒，我們可以在使用計數(shù)器的時候串塑，應(yīng)用?counters()?函數(shù)的第二個參數(shù)來指定子項的連接符。例如：
content:counters(counter-name, '-');
在以上規(guī)則中北苟，列表的子項會呈現(xiàn)為‘1-1桩匪， 1-2， 1-3’這樣的形式友鼻。上例子：
它呈現(xiàn)出來的效果如下圖：
counter 嵌套
以上就是對 CSS 計數(shù)器的簡單介紹傻昙。你可以看張鑫旭大神的這篇查看更詳細生動的介紹。
小禮物走一走彩扔，來簡書
