CSS counter-set 屬性

定義和用法

counter-set 屬性用于創建并將 CSS 計數器設置為特定值。

counter-set 屬性通常與 counter-increment 屬性和 content 屬性一起使用。

實例

例子 1

創建一個計數器（"my-counter"），將其設置為 5，并在每次出現 <h2> 選擇器時將其增加 1：

body {
  /* 將 "my-counter" 設置為 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* 將 "my-counter" 增加 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

親自試一試

例子 2

創建一個計數器（"my-counter"），將其設置為 5，并在每次出現 <h2> 選擇器時將其減少 1：

body {
  /* 將 "my-counter" 設置為 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* 將 "my-counter" 減少 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

親自試一試

例子 3

使用 "Section 10:"、"10.1"、"10.2" 等格式為章節和子章節編號：

body {
  /* 將 "section" 設置為 9 */
  counter-set: section 9;
}
h1 {
  /* 將 "subsection" 設置為 0 */
  counter-set: subsection 0;
}
h1::before {
  /* 將 "section" 增加 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* 將 "subsection" 增加 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

親自試一試

例子 4

創建一個計數器，將其設置為 9，并在每次出現 <h2> 選擇器時將其增加 1（使用羅馬數字）：

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 語法

counter-set: none|counter-name number|initial|inherit;

屬性值

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

相關頁面

參考：::before 偽元素

參考：::after 偽元素

參考：CSS content 屬性

參考：CSS counter-increment 屬性

參考：CSS counter() 函數