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() 函数