如下面这种需要累计序号的，因为某些行不一定存在，通常是用js去定义一个变量来记录这个序号。但还有一种纯css实现计数的方法。
image.png
改了下菜鸟教程的例子，可以更好理解这个计数器，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.box1 {
counter-reset: xxxx; /* 重置计数器成0 */
}
.box1 h3:before {
counter-increment: xxxx; /* 增加计数器值 */
content: "计数器" counter(xxxx) ": "; /* 显示计数器 */
}
.box2 {
counter-reset: dddd; /* 重置计数器成0 */
}
.box2 h3:before {
counter-increment: dddd; /* 增加计数器值 */
content: "测试" counter(dddd) ": "; /* 显示计数器 */
}
/* 注意：这里使用demo2的计数器，可以看到是累计的！！！ */
.demo:before{
counter-increment: dddd; /* 增加计数器值 */
content: "测试" counter(dddd) ": "; /* 显示计数器 */
}
</style>
</head>
<body>
<div class="box1">
<h1>使用 CSS 计数器demo1:</h1>
<h3>GOOGLE</h3>
<h3>RUNOOB</h3>
<h3>TAOBAO</h3>
</div>
<div class="box2">
<h1>使用 CSS 计数器demo2:</h1>
<h3>GOOGLE</h3>
<h3>RUNOOB</h3>
<h3>TAOBAO</h3>
</div>
<div class="box1">
<h1>使用 CSS 计数器demo3:</h1>
<h3>GOOGLE</h3>
<h3>RUNOOB</h3>
<h3>TAOBAO</h3>
</div>
<div class="demo">使用 CSS 计数器demo4:</div>
</body>
</html>
image.png
属性介绍
counter-reset
用于将 CSS 计数器重置为制定值
image.png
比如上面的demo1和demo3使用的同一个计数器 “xxxx” ，这个可以随便定义，在需要计数的地方使用counter-increment设置为这个值即可。
counter-increment
counter-increment属性用于将CSS Counters (en-US)的值增加给定值
image.png
counter()函数
真正统计的函数，统计你指定的这个计数器出现了多少次。
直白理解
就是counter-reset 设置个值，用于代表同一类计数器，然后需要累计的元素上搭配counter-increment、counter。counter-increment用于+1操作，counter计算这类计数器出现了多少次。后面如果再遇到counter-reset，则重置counter-reset后面设置的这个计数器，标记increment后也从1开始累加。
注意：counter-reset不是说只会限制在当前这个父元素内部！仔细看上面的demo4就理解了！计数器其实是个全局的变量！建议每次使用时都先使用counter-reset重置下，每次都重新计数。
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/8c8b81007f0d?v=1695716521065，转载请注明出处，谢谢。
参考：
https://www.runoob.com/cssref/func-counter.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-reset
https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-increment
网友评论