CSS counters() 函數

定義和用法

CSS 的 counters() 函數以字符串形式返回命名計數器和嵌套計數器的當前值。

在這里，我們使用 counters() 函數在不同級別的嵌套計數器之間插入一個字符串。

實例

例子 1

在這里，我們使用 counters() 函數在不同級別的嵌套計數器之間插入一個字符串（一個點）：

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

親自試一試

例子 2

設置計數器的樣式，并將連接字符串設置為 "-"：

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

親自試一試

CSS 語法

counters(countername, string, counterstyle)
值 描述
countername

必需。計數器的名稱（與 counter-reset 和 counter-increment 屬性使用的名稱相同）。

注意名稱區分大小寫。
string 必需。連接字符串。可以是任意數量的文本字符。
counterstyle

可選。計數器的樣式（可以是 list-style-type 值、@counter-style 名稱或 symbols() 函數）。

默認值為 decimal。

技術細節

版本： CSS3

瀏覽器支持

Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

相關頁面

教程：CSS 計數器

參考：CSS content 屬性

參考：CSS counter-increment 屬性

參考：CSS counter-reset 屬性

參考：CSS @counter-style 規則

參考：CSS counter() 函數