CSS counters() 函數

Halaman sebelumnya Fungsi counter() CSS
Halaman berikutnya Fungsi cubic-bezier() CSS
Kembali ke tingkat atas Panduan Fungsi CSS

定義和用法

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。

值

描述

countername

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

注意名稱區分大小寫。

string

必需。連接字串。可以是任意數量的文本字符。

counterstyle

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

默認值為 decimal。