使用CSS計數器
CSS櫃檯就像是“變量”。 該變量的值可以由CSS規則被遞增（這將跟踪它們使用多少次）。
要使用CSS櫃檯的工作，我們將使用以下屬性：
-
counter-reset-創建或重置計數器 -
counter-increment-增加計數器值 -
content-插件生成的內容 -
counter()或counters()函數-一個計數器的值添加到一個元素
要使用CSS計數器，它必須首先用創建counter-reset 。
下面的示例創建了一個頁面計數器（在身體選擇器），然後遞增為每個計數器值<h2>元素，並增加了"Section < value of the counter >:"每個之初<h2>元素：
例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
試一試» 嵌套計數器
下面的示例創建的頁面（部分）一個計數器，並為每一個櫃檯<h1>元素（款）。 在"section"計數器計數為每個<h1>與元素"Section < value of the section counter >."和"subsection"計數器計數為每個<h2>與元素"< value of the section counter >.< value of the subsection counter >"
例
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
} 試一試» 計數器也可以是有益的，使列出清單，因為計數器的一個新的實例在子元素中自動創建。 這裡我們使用的counters()函數來插入不同級別的嵌套計數器之間的字符串：
例
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} 試一試» CSS計數器屬性
| 屬性 | 描述 |
|---|---|
| content | 用於與前::和:: after偽元素，插入生成的內容 |
| counter-increment | 遞增一個或多個計數器的值 |
| counter-reset | 創建或復位一個或多個計數器 |