css 计数器counter函数，纯css实现序号递增

如下面这种需要累计序号的，因为某些行不一定存在，通常是用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

最后编辑于：2023.09.26 16:25:08