CSSカウンター
CSSカウンターは変数によって設定され、ルールに従って変数を増加させます。
カウンターを使って自動的に番号を付ける
CSSカウンターは、ルールに従って変数を増加させます。
CSSカウンターでは、以下のプロパティを使用します：
counter-resetカウンターを作成またはリセットするcounter-increment- 変数をインクリメントするcontent- 生成されたコンテンツを挿入するcounter()或counters()関数 - カウンターの値を要素に追加します
CSSカウンターを使用するには、まずcounter-resetで作成する必要があります：
以下の例では、ページにカウンターを作成し（bodyセレクター内）、各<h2>要素のカウント値が増加し、各<h2>要素の前に「Section <」を追加します。计数值>:"
CSS 实例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
尝试一下 »
嵌套计数器
以下の例では、ページにカウンターを作成し、各<h1>要素の前にカウント値「Section <」を追加します。メイン見出しのカウント値>. ネストされたカウンター値は<h2>要素の前に配置され、内容は"<"です。メイン見出しのカウント値>.<サブ見出しのカウント値>":
CSS 实例
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()関数は、異なるネストレベルで文字列を挿入します：
CSS 实例
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
尝试一下 »
CSSカウンター属性
| 属性 | 描述 |
|---|---|
| content | ::before および ::after 疑似要素を使用して、自動生成されたコンテンツを挿入します。 |
| counter-increment | 1つ以上の値をインクリメントする |
| counter-reset | 1つ以上のカウンターを作成またはリセットする |