CSS 計數器（counter）是由 CSS 維護的變數，其主要用途是，可以通過指定的規則來計算節點元素的使用次數。

計數器的使用很簡單，分為以下三步：

初始化計數器。
指定增量規則。
應用計數器。

這三步分別對應這計數器的三個屬性和方法：

counter-reset
counter-increment
counter()/counters()

下面使用一個例子，來熟悉這些規則。

首先，我們擁有一個如下的列表。

<ul>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ul>
複製程式碼

接下來我們使用計數器來為這個列表前面加上序號，使它呈現為下面這個樣子。

很簡單，如前面所述，三步走：

第一步，初始化計數器。我們使用 counter-reset 操作，這個屬性可以接受兩個值為一組的多組屬性值，第一個值，我們為計數器起個名字，第二個值，我們指定該計數器的初始值。

counter-reset: custom-name integer;
複製程式碼

第一個計數器的名稱必須由字母、數字、下劃線、中劃線組成，且第一個字元必須為字母。第二個為整數，可以為負值，預設值為0.一般情況下我們把它定義在它的父元素上。

此屬性可以指定多組，代表多個計數器，例如：

counter-reset: counter1 counter2 1 counter3 -2;
複製程式碼

上面的規則定義了三個計數器，第一個名稱為 counter1 初始值為 0，第二個 counter2 初始值為1，第三個counter3 初始值為 -2。

所以回到上面的例子，我們的列表要從1開始，所以，我們可以如下定義：

ul {
    counter-reset: items 0; /* 0 可以省略 */
}
複製程式碼

初始化之後，第二步，指定計數器增量規則。我們使用 counter-increment 來實現這個目的，這個屬性的值和前面的 counter-reset 十分類似，同樣是由兩個值組成的多組值，第一個值同樣是由 counter-reset 初始化好的計數器名稱，第二個值為該計數器的增量，預設值為 1.

counter-increment: counter-name integer;
複製程式碼

舉例，針對上面的三個計數器，我們分別為它們指定不同的增量規則：

counter-increment: counter1 counter2 -1 counter3 2
複製程式碼

我們為 counter1 沒有指定增量，所以它會按照預設值 1 遞增，counter2 按 1 遞減，counter3 按 2 遞增。

再次回到我們的例子，我們為已經初始化好的 items 計數器指定以 1 遞增的增量規則：

li {
    counter-increment: items 1; /* 1 同樣可以省略 */
}
複製程式碼

很簡單吧，接下來就是第三步，應用我們指定好的計數器。一般來說，計數器常用於自動生成列表項的遞增規則，所以經常在偽類元素的 content 屬性中使用它，同樣，我們需要一個 counter() 函式的幫助來將相應計數器注入 content 屬性中，我們把計數器的名稱傳入到此函式可以完成應用。並且可以定製更個性化的計數規則。直接上例子：

li:before {
    content: counter(items) '. ';
}

複製程式碼

這樣，我們就為三個列表項前面新增了‘1. 2. 3.’的計數規則。另外，counter() 方法可以指定第二個引數，來約束計數器的顯示規則，例如指定為 lower-roman，則它會按照小寫羅馬數字的形式遞增：ⅰⅱⅲⅳ···，至於這個值可以取什麼值，其實就是 list-style-type` 可以取的值它都可以。

需要注意的是，除了初始化操作，其它兩項操作必須要指定在相應的列表項上才能生效。

計數器巢狀

計數器特別強大的一點是，在一個巢狀的列表項，它會為內層的子元素自動新增計數器，我們可以在使用計數器的時候，應用 counters() 函式的第二個引數來指定子項的連線符。例如：

content: counters(counter-name, '-');
複製程式碼

在以上規則中，列表的子項會呈現為‘1-1， 1-2， 1-3’這樣的形式。上例子：

<!-- html -->
<ul>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

<!-- css -->
ul {
  counter-reset: content;
  list-style-type: none;
}
ul li:before {
  counter-increment: content;
  content: counters(content, "-") ". ";
}
複製程式碼

它呈現出來的效果如下圖：

以上就是對 CSS 計數器的簡單介紹。你可以看張鑫旭大神的這篇檢視更詳細生動的介紹。

CSS 計數器簡介

計數器巢狀

相關文章