CSS counter()関数

定義と使用方法

counter() 指定されたカウンタの現在の値を文字列形式で返します。

インスタンス

例1

ページにカウンタを追加（bodyセレクタ内）。各<h2>要素にカウンタ値を増やし、各<h2>要素の前に「第几章」のテキストを追加します：

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

実際に試してみてください

例2

カウンタースタイルの設定：

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

実際に試してみてください

CSS文法

counter(countername, counterstyle)
値 説明
countername

必須です。カウンタの名前（counter-resetおよびcounter-increment属性で使用される名前と同じです）。

注意、名前は大文字小文字を区別します。
counterstyle

オプションです。カウンタースタイル（list-style-typeの値、@counter-styleの名前、またはsymbols()関数ができます）。

デフォルト値は十進法です。

技術的詳細

バージョン： CSS3

ブラウザのサポート

クローム エッジ ファイアフォックス サファリ オペラ
サポート サポート サポート サポート サポート

相关页面

教程：CSS 计数器

参考：CSS content 属性

参考：CSS counter-increment 属性

参考：CSS counter-reset 属性

参考：CSS @counter-style 规则

参考：CSS counters() 函数