CSS counter-reset 屬性
示例
為每個 <h2> 選擇器建立計數器（“my-sec-counter”）並將其遞增一
body {
/* 將 "my-sec-counter" 設定為 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* 將 "my-sec-counter" 遞增 1 */
counter-increment: my-sec-counter;
content: "Section " counter(my-sec-counter) ". ";
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
counter-reset 屬性用於建立或重置一個或多個 CSS 計數器。
counter-reset 屬性通常與 counter-increment 屬性和 content 屬性一起使用。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS 語法
counter-reset: none|name number|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| none | 預設值。不會重置任何計數器 |
| id 號碼 | id 定義了要重置的計數器。number 設定計數器在選擇器每次出現時重置的值。預設的number值為 0 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
為每個 <h2> 選擇器建立計數器（“my-sec-counter”）並將其遞減一
body {
/* 將 "my-sec-counter" 設定為 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* 將 "my-sec-counter" 遞減 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}
自己動手試一試 »
示例
為章節和子章節編號，例如“Section 1:”、“1.1”、“1.2”等。
body {
/* 將 "section" 設定為 0 */
counter-reset: section;
}
h1 {
/* 將 "subsection" 設定為 0 */
counter-reset: subsection;
}
h1::before {
/* 將 "section" 遞增 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* 將 "subsection" 遞增 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
自己動手試一試 »
示例
為每個 <h2> 選擇器建立一個計數器，並使用羅馬數字將其遞增一
body {
/* 將 "my-sec-counter" 設定為 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* 將 "my-sec-counter" 遞增 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}
自己動手試一試 »
相關頁面
CSS 參考：::before 偽元素
CSS 參考：::after 偽元素
CSS 參考：content 屬性
CSS 參考：counter-increment 屬性
CSS 函式：counter() 函式
HTML DOM 參考：counterReset 屬性
