CSS 計數器

Pizza

Hamburger

Hotdogs

CSS 計數器是由 CSS 保持的“變量”，其值可以通過 CSS 規則遞增（以跟蹤其使用次數）。

計數器使您可以根據內容在文檔中的位置來調整其外觀。

帶計數器的自動編號

CSS 計數器就像“變量”。變量值可以通過 CSS 規則遞增（將跟蹤它們的使用次數）。

如需使用 CSS 計數器，我們將使用以下屬性：

  • counter-reset - 創建或重置計數器
  • counter-increment - 遞增計數器值
  • content - 插入生成的內容
  • counter() 或 counters() 函數 - 將計數器的值添加到元素

如需使用 CSS 計數器，必須首先使用 counter-reset 創建它。

下面的例子為頁面（在 body 選擇器中）創建一個計數器，然后為每個 <h2> 元素增加計數器值，并在每個 <h2> 元素的開頭添加 "Section <value of the counter>:"：

實例

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 創建或重置一個或多個計數器。