CSS Counters其實就是一計數器，早期在CSS中計數器僅存在于

ul 和 ol 元素。如果要使用在 div 這樣的元素上，只能通過 list-style-image 或者是元素的 backgroud-image 來實現。在 CSS2.1的規范 中介紹了一種新技術，允許開發人員使用偽類 :after 、 :before 或者偽元素 ::after 、 ::before 給任何元素創建自動遞增計數器——類似于列表中的項目符號( list-style-type )。更神奇的是，可以給這些計數器設置獨特樣式，讓其在外觀上更靚麗。如下圖所示：

這種技術令人有點困惑，因為他看起來不同于其他CSS屬性，需要同時使用多個CSS屬性。接下來與大家一起探討如何使用這幾個屬性。

CSS Counters用到的屬性

前面也提到過，使用CSS Counters給元素創建自動遞增計算器不僅僅是依賴于某一個CSS屬性來完成，他需要幾個屬性一起使用才會有效果。使用的到屬性包括：

• ?**counter-reset**：此值是必需的。必須用于選擇器，主要用來標識該作用域，其值可以自定義。
• ?**counter-increment**：用來標識計數器與實際相關聯的范圍。
• ?**content**：用來生成內容，其為:before、:after或::before、::after的一個屬性。在生成計數器內容，主要配合counter()一起使用。
• ?**counter()**：該函數用來設置插入計數器的值。
• ?**:before**、**:after**或**::before**、**::after**：配合content用來生成計數器內容。

要想完全了解或者熟練使用好CSS Counters來創建計數器，就需要對用到的每個屬性的使用規則有一定的了解。接下來就先簡單的了解這幾個屬性。

counter-reset

語法規則

counter-reset:[ <identifier> <integer>? ] | none | inherit

取值說明

counter-reset的默認值為 none，其主要取值包括兩個部分：

• ?**identifier**：用來定義計數器的名稱，這個名稱可以自定義，如：item。而且后面可以緊跟一個整數值，中間用空格分隔開來，如headings 0；
• ?**integer**：此值用來設置調用計算數器時起始值，默認值為0。

功能描述

counter-reset主要功能用來標識計數器作用域，而且此值必須用在選擇器上，必且是不能缺少的。共包括兩個部分，第一個部分是自定義計數器名稱，這一部分是必需的。第二部分是計數器起始值，此值是可選的。默認值為 0。此值告訴標識組起始值是什么，所以說這個值非常有價值。因為，如果你設置的值為 0，那么計數從 1開始；如果你設置的值是 -5，那么計數從 -4開始。依此類推。

counter-reset自定義計數器名稱時可以隨意取名，但此名不能是CSS的關鍵詞，比如 none、 inherit之類。

counter-reset屬性可以包含一個或者多個計數器標識符，每個后面都可以跟一個整數值，如 section 0 heading 0。如果元素都重置，并且增加一個計數器，計數器是第一次重置，后面值就會遞增。如果不止一次指定同一個計算器，則將按指定的計數器做遞增。
?

counter-increment

語法規則

counter-increment:[ <identifier> <integer>? ] | none | inherit

取值說明

默認值為

none。其值也包括兩個部分：

• ?**identifier**：計數器名稱，就調用counter-reset聲明的計數器的標識符。
• ?**integer**：一個整數值，指定計數起始值。其值允許是0或者負整數值，如果未指定任何值，則該值為1（前提是counter-reset未顯式設置計數的起始值）。其值遞增是按倍數值遞增，如果設置了值為2,后面元素遞增值為4、6、8，依此類推。

功能描述

counter-increment屬性是用來標識計數器與實際相關聯元素范圍。其第一個值是必需的，獲取 counter-reset定義的標識符。

counter-ncrement第二個值是一個可選值，是一個整數值，可以是正整數，也可以是負整數。主要用來預設遞增的值，如果取值為負值時，表示遞減。默認值為 1。

content

content是和偽類 :before、 :after或者偽元素 ::before、 ::after配合在一起使用，主要功能用來生成內容。有關于 content詳細介紹，此處不做過多闡述，感興趣的同學可以閱讀 Divya Manian寫的《 CSS Generated Content Techniques》一文。

在本文中所涉及到的內容，

content屬性主要與 counter([])配合使用，用來生成計數器值,如：

h2{counter-increment: section;&:before{content:"Chapter" counter(Chapter) "." counter(section);} }

counter()

counter()是一個函數，其主要配合 content一起使用。使用 counter()來調用定義好的計數器標識符。

counter()函數接受兩個參數，而且兩參數之間使用逗號( ,)來分隔。第一個參數是 counter-increment定義的屬性值 ,用來告訴該文檔插入的計數器標識符名稱是什么。第二個是用來設置計數器的風格，有點類似于 list-style-type。默認情況之下取值為十制，但你也可以重置這個樣式風格，比如 upper-roman或者 upper-alpha等。

counter()函數第二個值與列表中的 list-style-type值相等：

• ?disc
• ?circle
• ?square
• ?decimal
• ?decimal-leading-zero
• ?lower-roman
• ?upper-roman
• ?lower-greek
• ?lower-latin
• ?upper-latin
• ?armenian
• ?georgian
• ?lower-alpha
• ?upper-alpha
• ?none
• ?inherit

同樣的，可以使用多個

counter()，如： content: counter(Chapter,upper-roman) "-" counter(section,upper-roman);。

注：定義reset要在元素之前定義，部分安桌機設置默認值無效！！！

在線案例1

在線案例2

轉載請注明：前端錄?CSS的計數器：counter-increment與counter-reset

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=3-297-2"></script>

總結

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

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