CSS計數器是“啊太好了，竟不知道CSS可以做這啊”這類非常有趣的眾多特性之一。簡言之，用CSS使你持續某增加某個量，而無需JavaScript。
簡單計數器
我們從這個簡單的分頁示例開始：
See the Pen Pagination CSS Counter by Will Boyd (@lonekorean) on CodePen.
你見到的這些數字不是硬編碼在HTML中，它們是以下CSS生成的：
|
1 2 3 4 5 6 7 8 9 10 11 |
body { counter-reset: pages; // initialize counter } a { counter-increment: pages; // increment counter } a::before { content: counter(pages); // display counter } |
計數屬性遵循“文件出現順序”的規則。首先遇到 Body 元素，初始化一個叫pages的計數器。然後遇到一個 a 元素就增加並顯示pages計數器。
多個計數器
用不同的名字你就可以有多個計數器。這個例子有兩個計數範圍重疊的計數器，sections和boxes：
See the Pen Overlapping CSS Counters by Will Boyd (@lonekorean) on CodePen.
相關的CSS：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body { counter-reset: sections boxes; } section { counter-increment: sections; } section::before { content: 'Section ' counter(sections); } .box { counter-increment: boxes; } .box::before { content: counter(boxes, upper-roman); } |
這裡你可以看到用於立即初始化多個計數器的語法（第2行）。別緻一點，boxes計數器顯示為 upper-roman（譯者注：大寫羅馬數字） （第18行）。 display 的所有引數選項和 list-style-type 屬性是一樣的，這裡是文件。
統計使用者選擇
現在我們做些有趣的事情。計數屬性可以被置於像 :checked 的偽類選擇器中（譯者注：原文為pseudo-selectors,但一般寫作pseudo-classes selectors，故照例譯為偽類選擇器）。這使得計數器可以通過核取方塊反映使用者的選擇。下例是統計使用者選了多少項。
See the Pen Selection CSS Counter by Will Boyd (@lonekorean) on CodePen.
CSS只是少許修改前面例子中的。唯一的區別是我們在偽類選擇器 (input:checked) 中自增並僅在專門的 .total 元素中顯示。
|
1 2 3 4 5 6 7 8 9 10 11 |
body { counter-reset: characters; } input:checked { counter-increment: characters; } .total::after { content: counter(characters); } |
控制增量
並非必須以1為量自增。可以按你增加任何的量。它們甚至可以負增長。以前面的例子為基礎，這個例子為每個選擇器設定了特殊的增量。
See the Pen CSS Counter Game by Will Boyd (@lonekorean) on CodePen.
語法足夠簡單。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { counter-reset: sum; } #a:checked { counter-increment: sum 64; } #b:checked { counter-increment: sum 16; } #c:checked { counter-increment: sum -32; } #d:checked { counter-increment: sum 128; } #e:checked { counter-increment: sum 4; } #f:checked { counter-increment: sum -8; } .sum::before { content: '= ' counter(sum); } |
回到正題，你也可以控制計數器的初始值。
|
1 2 3 |
body { counter-reset: kittens 41; // starting out with 41 kittens } |
Potential Gotcha
display:none 的元素不會觸發計數。如果你想隱藏一個元素但仍然觸發計數，你必須用另一種方式隱藏。這是一種方式：
|
1 2 3 4 |
input { position: absolute; left: -9999px; } |
可能你已經注意到了，這正是我在最後兩個例子中所做的。為了演示效果，我隱藏了當前的核取方塊，但仍然需要它們被選時而計數。
結束語
太好了，瀏覽器支援CSS計數。普大喜奔~
CSS計數器神奇，但也別忘了我們的老朋友<ol>和<li>。在基本列表中標序它們還是不錯的。CSS計數器是取巧的方式，特別是因為它們在任何元素上都起作用，讓你在語法和語義上更靈活。
更新：我應該提及無障礙閱讀。CSS計數依賴於偽類元素中生成的內容。某些螢幕的讀者會閱讀到，某些則不會。因此，那些關鍵的內容最好不要依賴偽類元素。儘管示例教學的CSS計數器是精心設計的，但生產環境中我不會原封不動地使用它們。