CSS 記數器是一種在 CSS 中定義并使用的技術，可以讓開發者在文檔結構中計數元素，便于生成類似序號和目錄等的文檔內容。這樣可以完全脫離 JavaScript 實現序號的生成，減輕代碼運行的消耗。

/*定義計數器*/
body {
counter-reset: section;
}
/*應用計數器*/
h1:before {
counter-increment: section;
content: counter(section) ". "; // 這里理解為輸出 this.count += 1; "this.count. "即可
}

以上代碼演示了計數器的最基本用法。在這個例子中，我們定義了一個名為“section”的計數器，應用到了整個頁面的 body 元素中。接下來我們通過在 h1 元素前添加一個偽元素，應用“section”計數器并輸出相應的操作數。其中，“counter-increment”是增加計數器的值，“content”則是將計數器的值插入到標題前綴中輸出。

更進一步的，我們可以通過 CSS 選擇器的嵌套來控制計數器的變化區域，達到更為精細的序號控制。同時，我們還可以通過使用 CSS 中的樣式表達式，基于計數器的值計算并應用樣式，實現更加炫酷的效果。

/* 定義兩個計數器counters */
body {
counter-reset: h2counter;
counter-reset: h3counter;
}
/* 帶自定義顏色的序號 */
h2:before {
counter-increment: h2counter;
content: "Section " counter(h2counter) ". "; /* 這里的“.”是字符串，它會被輸出 */
color: #999;
}
/* 嵌套計數器 */
h3:before {
counter-increment: h3counter;
content: counter(h2counter) "." counter(h3counter) ". ";
}

在上面的例子中，我們定義了兩個計數器分別表示 h2 和 h3 元素的序號，并且通過嵌套選擇器進行了和諧地配合。h2 前綴中的“Section”字符串和顏色也是我們自己定義的。更重要的是，我們得到了類似“1.1.”這樣的可控序號。