CSS counter-set 屬性
示例
建立一個計數器（“my-counter”），將其設定為 5，併為 <h2> 選擇器的每次出現增加一
body {
/* 將“my-counter”設定為 5 */
counter-set: my-counter 5;
}
h2::before {
/* 增加“my-counter” 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
counter-set 屬性用於建立 CSS 計數器並將其設定為特定值。
counter-set 屬性通常與 counter-increment 屬性和 content 屬性一起使用。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| counter-set | 85 | 85 | 68 | 17.2 | 71 |
CSS 語法
counter-set: none|counter-name number|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| none | 預設值。不執行任何計數器設定 |
| counter-name number | 要設定的計數器名稱以及在選擇器每次出現時設定計數器的值。預設的number值為 0 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
建立一個計數器（“my-counter”），將其設定為 5，併為 <h2> 選擇器的每次出現減少一
body {
/* 將“my-counter”設定為 5 */
counter-set: my-counter 5;
}
h2::before {
/* 減少“my-counter” 1 */
counter-increment: my-counter -1;
content: "Section " counter(my-counter) ". ";
}
自己動手試一試 »
示例
對章節和子章節進行編號，例如“第 10 章：”、“10.1”、“10.2”等。
body {
/* 將“section”設定為 9 */
counter-set: section 9;
}
h1 {
/* 將 "subsection" 設定為 0 */
counter-set: subsection 0;
}
h1::before {
/* 增加“section” by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* 增加“subsection” by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
自己動手試一試 »
示例
建立計數器，將其設定為 9，併為 <h2> 選擇器的每次出現增加一（使用羅馬數字）
body {
/* 將“my-counter”設定為 9 */
counter-set: my-counter 9;
}
h2::before {
/* 增加“my-counter” 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
自己動手試一試 »
相關頁面
CSS 參考：::before 偽元素
CSS 參考：::after 偽元素
CSS 參考：content 屬性
CSS 參考：counter-increment 屬性
CSS 函式：counter() 函式
