作為程序猿，代碼比什么都有說服力，嗯，所以廢話不多說，直接看吧，認真看完了，就一定有收獲（內容有點多，需要一點耐心哦,我是一點一點寫的，咱也一點一點看唄）

counter:是css計數器，只能跟content屬性在一起使用的時候才起作用，而content屬性專用在before/after偽元素上

counter計數器的屬性和方法

屬性有：counter-reset、counter-increment

方法有：counter、counters

counter-reset：可以理解為“計數器-重置”的意思，有兩個參數：name（必選參數）/ start（可選參數，默認值為0）。主要作用就是給計數器起名字，順便告訴從哪個數字開始計數。

OK, 這里，我們先看個簡單的counter-reset的例子：

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 4;}p:after{content:counter(count);}</style><div class="box"><p>3的后面是</p> </div>

counter-reset的計數重置可以是負數，例如-2。也可以寫成小數，例如2.99當成2處理，不過就是IE和FireFox都不識別，認為是不合法數值，直接無視，當作默認值0來處理；Chrome，任何小數都是向下取整。

counter-reset，可以給多個計數器同時命名。中間直接用空格分開，其它的都不可以

嗯、看例子唄

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 4;display:inline-block;}p:after{content:counter(count);}span:before{content:counter(count1);}</style><div class="box"><p>13的后面是</p><span></span> </div>

另外，counter-reset還可以設置為none和inherit. 干掉重置以及繼承重置。

2. counter-increment：就是“計數器-遞增”的意思，值為counter-reset的1個或多個name。后面可以跟隨數字，表示每次計數的變化值。如果不寫，則使用默認變化值1

css計數器的計數是有一套規則的，具體來說就是：counter-reset唯一，每counter-increment一次，counter-reset增加一次計數。

下面我們來看一下例子理解一些

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 3; counter-increment:count;}p:after{content:counter(count);}</style><div class="box"><p>3的后面是</p> </div>

這里counter-increment在p標簽中，counter-reset值增加，默認遞增1，于是計數從設置的初始值3變成了4，count就是這里的計數器，自然偽元素content值counter(count)就是4

②?當然，也可以普照自身，也就是counter-increment直接設置在偽元素上：

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 3; }p:after{content:counter(count);counter-increment:count;}</style><div class="box"><p>3的后面是</p> </div>

依然是使用一次counter-increment全局的計數器+1，所以，顯示的數值還是4，效果與上面的一樣。

③?如果父元素和子元素都設置counter-increment，結果會如何呢？看下面的例子

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}p{font-size:20px;counter-reset:count 2;counter-increment:count; }p:after{content:counter(count);counter-increment:count;}</style><div class="box"><p>3的后面是</p> </div> 很簡單的，父元素增加1，子元素也增加1，counter-reset 設置的計數器值增加2次，計數起始值是2，于是現實的數字就是4 啦！

總而言之，無論位置在何方，只要有counter-increment，對應的計數器的值就會變化，counter()只是輸出而已！

counter-increment其他設定
① counter-reset可以一次命名兩個計數器名稱,counter-increment自然有與之呼應的設定，也是名稱留空就可以了。

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1}p:after{content:counter(count);}span:before{content:counter(count1);}</style><div class="box"><p>33的后面是</p><span></span> </div>

counter-increment:每次增加的數字默認是1，當然我們也可以自己設置增加的數字是什么，就像上面的例子，可以把增加值設置為2

還可以是負數，例如：

counter-increment: counter -1

就有了遞減排序效果啦！

③?counter-increment值還可以是none或者inherit

3. counter()/counters()
這是個方法，作用很單純顯示計數。不過名稱、用法有多個：

①?目前為止，從上面的例子中我們用的比較多的就是下面的這種了

counter(name) /* name就是counter-reset的名稱 */

②?那下面這個語法是什么意思呢？

counter(name, style)

這里的style參數還有有些名堂的。其支持的關鍵字值就是list-style-type支持的那些值。作用是，我們遞增遞減可以不一定是數字，還可以是英文字母，或者羅馬文等。

list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

看個例子唄

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1}p:after{content:counter(count);}span:before{content:counter(count1,lower-roman) ;}</style><div class="box"><p>33的后面是</p><span></span> </div>

③?counter還支持級聯。也就是一個content屬性值可以有多個counter()方法

<style>.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;}p{counter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1}p:after{content:counter(count) counter(count1);}</style><div class="box"><p>33的后面是</p><span></span> </div>

④?下面介紹counters()方法。看似值多了個字母s, 但表意大變身。counters幾乎可以說是嵌套計數的代名詞。

基本用法為：

counters(name, string);

其中，string參數為字符串（需要引號包圍的）（必須參數），表示子序號的連接字符串。例如的1.1的string參數就'.',1-1的string參數就是‘-’..

嗯、直接看例子嘍

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Demo</title><style>li{list-style:none;}.father { padding-left: 20px; counter-reset: count; line-height: 1.6; color: #666; }.son:before { content: counters(count, '-') '. '; counter-increment: count; font-family: arial black; }</style> </head> <body> <ul class="father"><li class="son">我的愛好<ul class="father"><li class="son">爬山</li><li class="son">追劇</li><li class="son">旅游</li></ul></li><li class="son">我的偶像<ul class="father"><li class="son">王昱珩<ul class="father"><li class="son">最強大腦第二季選手</li><li class="son">最強大腦第五季水之隊隊長</li></ul></li><li class="son">胡歌</li><li class="son">陳默</li></ul></li><li class="son">web前端</li><li class="son">啦啦啦啦啦</li> </ul> </body> </html>

如下圖所示

是不是很奇妙，就出現了上面的效果

⑤counters()也是支持style自定義遞增形式的。

counters(name, string, style)

與counter()的style參數使用一致，不贅述。

注意：

一個元素，如果設置了counter-increment, 但是其display的屬性值是none或者含有hidden屬性（針對支持瀏覽器），則此計數值是不會增加的。而visibility：hidden以及其他聲明不會有此現象。

學完了，讓我們一起來看看一些有意思的小實例吧！

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>counter小實例</title><style>#box{width:300px; height:300px; background:greenyellow; padding:30px; margin:100px auto;counter-reset:count;}lable{margin-left:20px;}.check{counter-increment:count;}.count:after{color:red; font-size:20px; content:counter(count);}</style> </head> <body> <div id="box"><p>選出你喜歡的他或她</p><input type="checkbox" /><lable>胡歌</lable><br/><input type="checkbox" /><lable>王昱珩</lable><br/><input type="checkbox" /><lable>鮑云</lable><br/><input type="checkbox" /><lable>梁紫晨</lable><br/><input type="checkbox" /><lable>陳默</lable><br/><input type="checkbox" /><lable>唐嫣</lable><br/><input type="checkbox" /><lable>楊冪</lable><br/> <span class="count">你總共選擇了</span><span>位</span> </div> <script>var aIpt = document.getElementsByTagName('input');var len = aIpt.length;for(var i=0;i<len;i++){aIpt[i].index = i;aIpt[i].onclick = function(){if(this.checked){this.className='check';}else{this.className='';}}} </script> </body> </html>

上面的是效果圖，下面的總數會隨著你選擇的人數而不斷變化，是不是很簡單啦

由于計數器是偽元素控制顯示的。因此，我們幾乎可以應用各種CSS樣式，各種定位等。所以，基本上，只要有有序序號呈現的地方，就能使用CSS計數器。

嗯、分享結束，內容有點長，主要是想要一次把這些知識搞清楚，有耐心的看完了，一定會有所收獲的。

總結

以上是生活随笔為你收集整理的css中的counter计数器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。