前言
在编译基于内容的网页时，往往需要减少标题的序列号，如果是手动逐个添加，标题少或好，标题多（几十百）维护会很压抑，可能会更改其中一个序列号导致所有后续序列号被修改， 添加序列号时容易出错
这类问题有一个很好的解决方案：CSS支持序数的状态管理，使用计数器、计数器复位、计数器递增属性可以实现序数的自增量，具体用途请见下文
如何使用
让我们来看看每个属性的句型：
反复位句型
counter-reset 属性用于将 CSS 计数器重置为指定值，其句型如下：
<code class="hljs language-css" lang="css"> counter-reset: [] | none;
将属性值指定为 none 时，不执行计数器重置
当属性值指定为 [] 时：
名称不区分大小写，可以包含数字 、- 、_、/，并且第一个字符必须是字母
初始值可以为负、0、负
浏览器兼容性如下：
反递增句型
计数器增量属性用于按给定值递增 CSS 计数器的值，语法如下：
counter-increment: [] | none;
当属性值指定为 none 时序号css，不得降低计数器
当属性值指定为 [] 时：
浏览器兼容性如下：
计数器（） 语法
设置上述两个属性后，页面仍然没有变化，因为计数器本身没有可见功效序号css，而是通过 counter（） 函数返回开发者定义的计数器值来实现相应的功效。counter（） 函数通常与具有以下句子模式的伪元素一起使用：
div::before {
content: '' + counter([, ])
}
属性值表示要使用的计数器的名称，以及
名称和增量在使用前需要用以上两个属性定义，值不能为无
属性值是可选的，可用于设置计数器的样式，例如使用 trad-Chinese-informa 将计数器的数字 123 转换为英文 1、2、3（此处可以参考其他预定义的计数器样式）。
浏览器兼容性如下：
代码实现
了解了 CSS3 计数器使用的三个属性后，就可以编写代码实现需要在文章标题中添加序列号，具体代码如下：
:root {
counter-reset: heading1;
}
h1 {
counter-reset: heading2;
counter-increment: heading1;
}
h1::before {
content: "第" counter(heading1) "章 ";
}
h2 {
counter-increment: heading2;
counter-reset: heading3;
}
h2::before {
content: counter(heading1) '.' counter(heading2) ' ';
}
h3 {
counter-increment: heading3;
counter-reset: heading4;
}
h3::before {
content: counter(heading1) '.' counter(heading2) '.' counter(heading3) ' ';
}
h4::before {
counter-increment: heading4;
content: counter(heading1) '.' counter(heading2) '.' counter(heading3) '.' counter(heading4) ' ';
}
至此，我们已经完成了在文章标题中添加序列号的需要，代码的效果如下：
CSS 计数器的其他用途
这是 CSS 计数器的另一个应用场景，可以作为多复选框的计数器，这样不用 JavaScript 直接显示选中的多复选框数量
该网页如下所示：
<div class="box">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<p>你选择了<span class="counter"></span>个项</p>
</div>
CSS 实现代码如下：
.box {
counter-reset: checkedCounter;
}
:checked {
counter-increment: checkedCounter;
}
.counter::before {
content: counter(checkedCounter);
}
最终疗效如下：
参考
本文的部分内容引用自 MDN，引用如下：
浏览器兼容性在我可以使用吗中描述
发表评论