css3里有個(gè)很強(qiáng)大的功能，就是計(jì)算器，使用它可以很方便對頁面中的任意元素進(jìn)行計(jì)數(shù)，實(shí)現(xiàn)類似于有序列表的功能。與有序列表相比，突出特性在于可以對任意元素計(jì)數(shù)，同時(shí)實(shí)現(xiàn)個(gè)性化計(jì)數(shù)。

簡而言之，計(jì)數(shù)器就是采用css給html元素自動(dòng)生成編號(hào)。其本質(zhì)上是由css維護(hù)的變量，其值可以通過css規(guī)則遞增以跟蹤它們的使用次數(shù)。

一、css計(jì)數(shù)器相關(guān)屬性：

1.counter-reset　

定義計(jì)數(shù)器，包括初始值，作用域等；   值為計(jì)數(shù)器的名稱。默認(rèn)情況下，計(jì)數(shù)器從0開始。此屬性還可用于將其值更改為任何特定數(shù)字。記住在必須在父節(jié)點(diǎn)初始化你需要的計(jì)數(shù)器，不然序號(hào)肯定是不對的。當(dāng)元素display：none時(shí)，該屬性失效。

它的值包括兩部分：第一部分為計(jì)數(shù)器的名字；第二部分為計(jì)數(shù)器的起始值（默認(rèn)為0），counter-reset還可以同時(shí)聲明多個(gè)計(jì)數(shù)器比如：

counter-reset: count 0  /*標(biāo)識(shí)計(jì)數(shù)器count從1開始*/
counter-reset: count2 2 /*標(biāo)識(shí)計(jì)數(shù)器count2 從3開始*/
counter-reset: count1 0 count3 0 count4 0 /*聲明了三個(gè)計(jì)數(shù)器，count1，count2，count3*/

2.counter-increment

用于可計(jì)數(shù)的元素中，設(shè)置計(jì)數(shù)器的增數(shù)；

他的值也包括兩部分：第一個(gè)為計(jì)數(shù)器的名字，即counter-reset設(shè)置好的名字，第二個(gè)值標(biāo)識(shí)遞增的值（默認(rèn)為1），比如： 

counter-increment: count 1 /*表明每次遞增 1*/   
counter-increment：count 2 /*表明每次遞增 2*/

3.counter()

content和counter需要搭配使用，content主要是跟 :after, :before,::after,::before來搭配用的，counter主要是給元素插入計(jì)數(shù)器的值。 語法如下：

content:counter(name)  
        counter(name,list-style-type) 
        counters(name,string) 
        counters(name,string,list-style-type)

name就是你計(jì)數(shù)器的名字。

string為在計(jì)數(shù)器之間的字符串。

list-style-type可以用來指定計(jì)數(shù)器的樣式，比如可以用1，2，3，4來計(jì)數(shù)，也能用a,b,c,d來計(jì)數(shù) 。list-style-type樣式如下：

disc:css1默認(rèn)值。實(shí)心圓circle:css1空心圓square:css1實(shí)心方塊decimal:css1阿拉伯?dāng)?shù)字lower-roman:css1小寫羅馬數(shù)字upper-roman:CSS1大寫羅馬數(shù)字lower-alpha:CSS1小寫英文字母upper-alpha:CSS1大寫英文字母none:CSS1不使用項(xiàng)目符號(hào)armenianl:CSS2未支持。傳統(tǒng)的亞美尼亞數(shù)字cjk-ideographic:CSS2未支持。淺白的表意數(shù)字georgian:CSS2未支持。傳統(tǒng)的喬治數(shù)字lower-greek:CSS2未支持?；镜南ＥD小寫字母hebrew:CSS2未支持。傳統(tǒng)的希伯萊數(shù)字hiragana:CSS2未支持。日文平假名字符hiragana-iroha:CSS2未支持。日文平假名序號(hào)katakana:CSS2未支持。日文片假名字符katakana-iroha:CSS2未支持。日文片假名序號(hào)lower-latin:CSS2未支持。小寫拉丁字母upper-latin:CSS2未支持。大寫拉丁字母

例子：

content:"F." counter(counter);在計(jì)數(shù)器前面添加‘F.’
content:counter(counter,lower-alpha);　　指定計(jì)數(shù)器的列表樣式；
content:counters( counter  ,".") " "; 　　在計(jì)數(shù)器之間加點(diǎn)號(hào)，同時(shí)在計(jì)數(shù)器末尾加一個(gè)空格；
content:counters( counter  ,".",lower-roman) " ";定義計(jì)數(shù)器為小寫羅馬數(shù)字格式，同時(shí)加點(diǎn)號(hào)，空格；

二、css計(jì)數(shù)器例子  

創(chuàng)建計(jì)數(shù)器步驟：

第一步：聲明計(jì)數(shù)器:要使用CSS Counters生成自動(dòng)計(jì)數(shù)器，首先就是通過counter-reset屬性先聲明一個(gè)計(jì)數(shù)器名稱。
第二步：設(shè)置計(jì)數(shù)器：counter-reset只是定義了一個(gè)計(jì)數(shù)器標(biāo)識(shí)符，在實(shí)際使用中，需要通過counter-increment屬性來控制計(jì)數(shù)器的增減。 
第三步：顯示計(jì)數(shù)器：最后一步，就是如何顯示計(jì)數(shù)器了。顯示計(jì)數(shù)器需要通過:before、content和counter()：來進(jìn)行設(shè)置。 

html:

<ul>
  <li>List item</li>
  <li>List item</li>
  <ul>
    <li>List item</li>
  </ul>
</ul>

css:

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ': ';
}

效果如下：

• List item
  List item
  List item

新片場https://www./sites/73286.html 傲視網(wǎng)https://www./sites/73285.html

三、css計(jì)數(shù)器中常見問題

怎么讓計(jì)數(shù)器倒序計(jì)數(shù)?         

只要把增量counter-increment為負(fù)數(shù)即可。 

怎么改變計(jì)數(shù)器的計(jì)數(shù)符號(hào)?        

counter()的默認(rèn)樣式為decimal，即數(shù)字。 

我們可以根據(jù)需要修改成其他樣式，例如：upper-roman（羅馬數(shù)字） 

計(jì)數(shù)器的兼容性？

目前主流瀏覽器基本都支持counter-reset屬性。 

注意： 因?yàn)樵贗E6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以認(rèn)為它們都不支持content 屬性，測試也就毫無意義，所以這個(gè)列表將IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset屬性

CSS計(jì)數(shù)器除了用來計(jì)數(shù)還有什么其他的作用？

CSS計(jì)數(shù)器對于生成大綱列表特別有用，因?yàn)橛?jì)數(shù)器的新實(shí)例是在子元素中自動(dòng)創(chuàng)建的。使用counters() 函數(shù)，可以在不同級(jí)別的嵌套計(jì)數(shù)器之間插入分隔文本。

除了生成篇數(shù)、章節(jié)和段落以外，CSS計(jì)數(shù)器還被應(yīng)用于計(jì)算數(shù)據(jù)類型的小游戲當(dāng)中。 

CSS計(jì)數(shù)器與display:none的使用會(huì)造成什么影響？

一個(gè)元素，如果設(shè)置了counter-increment, 但是其display的屬性值是none或者含有hidden屬性（針對支持瀏覽器），則此計(jì)數(shù)值是不會(huì)增加的。而visibility:hidden以及其他聲明不會(huì)有此現(xiàn)象。

counter計(jì)數(shù)器能和ol、ul同時(shí)使用嗎？

 counter計(jì)數(shù)器可以和ol、ul同時(shí)使用，符合起來還能達(dá)成復(fù)合序號(hào)的效果