CSS 計數器
披薩
漢堡包
熱狗
CSS 計數器是 CSS 維護的“變數”，其值可以透過 CSS 規則來增加（以跟蹤它們被使用了多少次）。計數器允許您根據內容在文件中的位置來調整其外觀。
使用計數器自動編號
CSS 計數器就像“變數”。變數的值可以透過 CSS 規則來增加（這將跟蹤它們被使用了多少次）。
要使用 CSS 計數器，我們需要使用以下屬性：
counter-reset- 建立或重置計數器counter-increment- 增加計數器的值content- 插入生成的內容counter()或counters()函式 - 將計數器的值新增到元素中
要使用 CSS 計數器，必須先使用 counter-reset 建立它。
以下示例為頁面建立了一個計數器（在 body 選擇器中），然後為每個 <h2> 元素增加計數器的值，並在每個 <h2> 元素前面新增“Section <計數器值>:”。
示例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
自己動手試一試 »
巢狀計數器
以下示例為頁面建立了一個計數器（section），併為每個 <h1> 元素建立了一個計數器（subsection）。“section”計數器將針對每個 <h1> 元素計數，顯示“Section <section 計數器值>.”，而“subsection”計數器將針對每個 <h2> 元素計數，顯示“<section 計數器值>.<subsection 計數器值>”
示例
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 | 與 ::before 和 ::after 偽元素一起使用，以插入生成的（內容）。 |
| counter-increment | 增加一個或多個計數器的值。 |
| counter-reset | 建立或重置一個或多個計數器。 |
| counter() | 返回命名計數器的當前值。 |
