计数器

@Counter
. 根据元素个数自动计数
. 可以嵌套使用实现多级列表
. 理工科最爱：为代码编号
. 计数标识符可以使用连字符-，不需要使用引号包裹
. 建议使用 <ol> 或 <ul> 或 <dl> 列表元素；也可以使用其它任意元素形式
计算器属性
类别 说明
counter-reset 创建；默认从0开始；初始化计数器
多个计数器使用空格分割
可以使用变量
counter-increment 计数
counter() 在伪元素的 content 属性中获取并显示
设置计数器样式
list-style-type常见类型
类别 说明
disc 默认实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 普通数字
decimal-leading-zero 0开头的数字标记：01, 02, 03
lower-roman 小写罗马数字：i, ii, iii, iv, v
upper-roman 大写罗马数字：I, II, III, IV, V
lower-alpha 小写英文字母：a, b, c, d, e
upper-alpha 大写英文字母：A, B, C, D, E
步骤
为父元素创建/设置/初始化计数器
子元素计数并使用伪元素 content 显示
[] 初始化
. 默认从0开始计数
counter-reset: percent;
. 从10开始计数
counter-reset: percent 10;
. 根据变量开始计数
counter-reset: percent var(--per);
. 使用连字符-定义复杂计数器
counter-reset: chapter-sn;
. 同时声明多个计数器
counter-reset: tbl-sn img-sn exam-sn;
[] 有序列表编号
.除了使用列表元素外，也可以使用任意元素
ol {
    counter-reset: li-sn;
}

ol li {
    counter-increment: li-sn;
}

ol li::before {
    content: counter(li-sn);
    color: #fff;
    margin-right: 1em;
    padding: 0 4px;
    background-color: var(--main-color);
}
[] 为代码添加行号
. 注意结构要符合要求
<pre>
  <span>hello, world.</span>
</pre>
pre {
  counter-reset: sn;
}

pre span {
  counter-increment: sn;
}

pre span::before {
  content: counter(sn, decimal-leading-zero)' ';
}
[] 文章排版 - paper
1. 为文章添加章节序号
.article {
  counter-reset: chap;
}

.article h2 {
  counter-reset: sec;//每章的分节都重新编号
  counter-increment: chap;
}

.article h2::before {
  content: '第' counter(chap)'章 ';
}

.article h3 {
  counter-increment: sec;
}

.article h3::before {
  content: counter(chap)'.' counter(sec)'节 ';
}
2. 为表和图添加序号；统一编号；也可以按章节编号
body {
  counter-reset: tbl-sn img-sn;
}

/* table */
table {
  counter-increment: tbl-sn;
}

table caption::before {
  content: '表' counter(tbl-sn)' ';
}

/* figure */
figure {
  counter-increment: img-sn;
}

figure figcaption::before {
  content: '图' counter(img-sn)' ';
}
@counter-style
. 自定义计数样式
@counter-style counter-style-name {
  system: 类型 decimal | alpha | symbols;
  symbols: 符号序列;
  suffix: 后缀；每个计数后面的字符串;
  range: 有效范围;
  fallback: 超出范围时使用的备用计数器，counter-style-name;
  speak-as: 控制语音合成器如何读出计数 speaking-rule;
}

.custom-ul>li {
  list-style-type: my-style;
}