css如何动态累计数字？

导读：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, 等。（日文片假名序号）