你可能不知道的CSS 計數器

前言

CSS 裏面的僞元素實際上是很是好用的，可是常常容易被你們忽略，僞元素裏面經常使用到的 content 屬性，可能如今不少人僅僅覺得 content 屬性的值只支持字符串，除了字符串外經常使用到的還有 uri、counter ，今天所要介紹的就是 conter(計數器)。

先看以下的例子：

<div>
  <h3>桃翁</h3>
  <h3>介紹</h3>
  <h3>css 計數器</h3>
</div>

根據如上的 HTML 你是否有辦法不經過 JavaScript ，僅僅用 CSS 在 title 前面增長 Title number: 呢？

CSS 計數器基本概念

若是僅僅增長一個 Title，你們都知道經過僞元素(:before或者:after)，設置 content 爲 Title，可是如何自動根據 h3 出現的順序來展現自動編號可能不少人就不知道了。

自動編號在 CSS 2.1 中是經過兩個屬性控制的，'counter-increment'和'counter-reset'。經過這些屬性定義的計數器用於'content’屬性的 counter() 和 counters() 函數

初始化計數器

在使用計數器的時候須要先初始化這個計數器，而且設置一個計數器的名字(變量)。下面是例子，title 就是名字，conter-reset 就是用來初始化的，這個屬性是必須設置的，不然沒辦法用計數器。

'counter-reset'屬性也含有一列一個或多個計數器，每一個後面能夠跟一個可選的整數。該整數給定了每次出現該元素時給計數器設置的值，默認爲 0

counter-reset: 計數器名稱[, 默認值number];           /* 重置計數器成0 */

計數器自增

有了一個計數器的變量後，而後可讓這個變量進行自增：

'counter-increment'屬性接受一個或多個計數器名（標識符），每一個後面均可以跟一個可選的整數。這個整數表示每次出現該元素時計數器遞增幾。默認增量是 1，能夠接受 0 和負數

counter-increment: 計數器名稱[, 增量];      /* 增長計數器值 */

顯示計數器

最後就是現實計數器的值，獲取計數器的值有兩個函數：counter() 和 counters() ，如上面的例子：

content: counter(計數器名稱[, 顯示的風格]) /* 顯示計數器 */

或者

counters(計數器名稱, 嵌套時拼接字符串[, 可選的顯示風格])

基本使用

學完了基本概念，而後就能夠解決上面的問題了。按照步驟來，三步：

1. 初始化計時器

div {
  counter-reset: title;           /* 重置計數器成0 */
}

1. 計數器自增

h3:before {
  counter-increment: title;      /* 增長計數器值 */
}

1. 顯示計數器

h3:before {
  content: "Title " counter(title) ": "; /* 顯示計數器 */
}

合起來的解決方案以下：

div {
  counter-reset: title;           /* 重置計數器成0 */
}
h3:before {
  counter-increment: title;      /* 增長計數器值 */
  content: "Title " counter(title) ": "; /* 顯示計數器 */
}

高級用法

嵌套計數器與做用域

計數器是「自嵌套的（self-nesting）」，若是重置一個位於後代元素或者僞元素中的計數器，會自動建立一個新的計數器實例。這對 HTML 中的列表之類的場景來講很重要，這種場景下，元素自身能夠嵌套任意深度，不用爲每一層定義惟一命名的計數器

計數器的做用域從文檔中具備 'counter-reset'該計數器的第一個元素開始，包括該元素的後代、後續兄弟及其後代。

官方套話比較難懂，用大白話說就是設置了 counter-reset ，那麼這個元素的的子元素都屬於這個做用域下。

想要徹底理解做用域，就得把下面這個 圖看懂：

<img src="http://imgs.taoweng.site/2019-12-09-142219.png" style="zoom:50%;" />

上面的這個 HTML 代碼，再加上這段 CSS 代碼：

OL { counter-reset: item }
LI { display: block }
LI:before { 
  counter-increment: item 
}

OL 將會建立一個計數器，而且 OL 的全部子級將引用該計數器，若是咱們用item[n]表示"item"計數器的第 n個實例，用"{"和"}"表示一個做用域的開始和結束，那麼上面 HTML 片斷將使用標註的計數器。

注意看 2.3.1 的兩個元素，因爲他們都在 2.3 下面，有兩個同名的計數器，那麼這兩個同名計數器會分別建立實例，全部會獲得兩個 2.3.1。

若是懂了做用域的關係，接下來就能夠經過 counter() 或者 counters() 函數進行展現。

counter

Counter 顯示代碼以下：

OL { counter-reset: item }
LI { display: block }
LI:before { 
  content: counter(item) ". "; 
  counter-increment: item 
}

效果以下：

能夠看到 counter 只會顯示當前做用域下計數器的值，若是要生成嵌套做用域的計數器就得用 counters 函數。

counters

OL { counter-reset: item }
LI { display: block }
LI:before { 
  content: counters(item, '.') " "; 
  counter-increment: item;
}

更換格式

在顯示計數器部分 counter 和 counters 都有一個可選參數，顯示風格，這個顯示風格跟 list-style-type 是同樣的，好比咱們將文章開頭的例子拿來舉例，默認是 decimal 風格，好比換成字母(type 是 lower-latin)形式，css 以下：

div {
  counter-reset: title;           /* 重置計數器成0 */
}
h3:before {
  counter-increment: title;      /* 增長計數器值 */
  content: "Title " counter(title, lower-latin) ": "; /* 顯示計數器 */
}

效果以下，list-style-type 有不少種，甚至還有中文(list-style-type 是 cjk-ideographic)的。

自定義起始值

起始值訂爲 5

div {
  counter-reset: title 5;           /*起始值訂爲 5 */
}
h3:before {
  counter-increment: title;      
  content: "Title " counter(title) ": "; 
}

自定義每次遞增的值

每次遞增的值爲 2

div {
  counter-reset: title 5;       
}
h3:before {
  counter-increment: title 2;      /* 每次遞增的值爲 2 */
  content: "Title " counter(title) ": "; 
}

使用場景

場景 1： 嵌套列表

好比要生成一個文章的大綱：

場景2： 計算已經勾選的複選框

使用輸入框的：checked 僞類，咱們能夠檢查複選框是否被選中，選中的話，咱們計數器的數值就會增長。

下面的這個 2 種菜系直接就是能夠經過計數器來實現的，不須要使用 js

場景3： 自動追蹤文檔條目

當你須要處理一些重複元素的時候，而且你一樣想統計他們的數量，那麼這個方案會很好用。

參考文章

• css計數器詳解

歡迎關注個人公衆號「前端桃園」