CSS計數器的趣味時光

CSS計數器是「啊太好了，竟不知道CSS能夠作這啊」這類很是有趣的衆多特性之一。簡言之，用CSS使你持續某增長某個量，而無需JavaScript。

簡單計數器

咱們從這個簡單的分頁示例開始：

 

你見到的這些數字不是硬編碼在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：

 

相關的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，故照例譯爲僞類選擇器）。這使得計數器能夠經過複選框反映用戶的選擇。下例是統計用戶選了多少項。

 

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爲量自增。能夠按你增長任何的量。它們甚至能夠負增加。之前面的例子爲基礎，這個例子爲每一個選擇器設置了特殊的增量。

 

語法足夠簡單。

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計數器是精心設計的，但生產環境中我不會原封不動地使用它們。

CSS計數器的趣味時光