导读：css如何动态累计数字？用于章节目录的序列数生成，用css的计数器实现起来比 js方式更简单！
伪元素
::after ::before伪元素设置content 可以在元素的首部和尾部添加内容，我们要在元素的首部添加序列号，所以要用到的是::before的content 属性
计数器
counter-reset 初始化或重置计数器的值；
格式：
counter-reset: 计数器的名字 [可选，计数器初始值]
counter-reset: chapter; /*初始化 默认初始值为0*/
counter-reset: chapter 1; /*初始化 初始值为1*/
counter-reset: chapter item mini; /*初始化多个计数器*/
counter-increment 计数器累加；
格式：
counter-increment: 计数器的名字 [可选，计数器增量值]
counter-increment: chapter; /*累加，默认增量为 1*/
counter-increment: chapter 2; /*累加，增量为 2 */
counter() 计数器累计；
格式：
counter(计数器的名字, [可选type，同list-style-type])
.chapter h2::before {
content: counter(chapter, cjk-ideographic); /*第一个参数计数器的名字，必须与counter-reset和counter-increment中计数器的名字一致*/
}
简单示例：
一个计数器运用：chapter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
counter-reset: chapter;
}
ul {
margin: 20px;
padding: 0;
}
ul li {
list-style-type: none;
padding: 2px 0px;
}
.chapter {
counter-reset: item;
counter-increment: chapter;
}
.chapter h2::before {
content: '第' counter(chapter, cjk-ideographic) '章、';
}
</style>
</head>
<body>
<div class="chapter">
<h2>章节内容</h2>
<ul class="sendSeq">
<li>
段落内容
<ul class="mini">
<li>项目小结</li>
<li>项目小结</li>
</ul>
</li>
<li>段落内容</li>
<li>段落内容</li>
</ul>
</div>
<div class="chapter">
<h2>章节内容</h2>
<ul class="sendSeq">
<li>
段落内容
<ul class="mini">
<li>项目小结</li>
<li>项目小结</li>
</ul>
</li>
<li>段落内容</li>
<li>段落内容</li>
</ul>
</div>
</body>
</html>
多个计数器运用：chapter item mini
<style>
body {
counter-reset: chapter item mini;
}
ul {
margin: 20px;
padding: 0;
}
ul li {
list-style-type: none;
padding: 2px 0px;
}
.chapter {
counter-reset: item;
counter-increment: chapter;
}
.chapter h2::before {
content: '第' counter(chapter, cjk-ideographic) '章、';
}
.sendSeq li {
font-size: 18px;
counter-increment: item;
}
.sendSeq li::before {
content: counter(chapter) '.' counter(item) ' ';
}
.mini {
counter-reset: mini;
}
.mini li {
font-size: 14px;
counter-increment: mini;
}
.mini li::before {
content: counter(chapter) '.' counter(item) '.' counter(mini) ' ';
}
</style>
补充： list-style-type 属性值
| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。（1,2,3,4,等。） |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 （一，二，三，四，等。） |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号） |