《CSS世界》第四章学习心得——深入理解content（下）_css上机体会和学习感悟-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22182279/article/details/80251555

本文介绍CSS计数器的使用方法，包括counter-reset、counter-increment及counter和counters函数，并通过一个家庭成员关系的例子展示了如何利用这些计数器进行嵌套计数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

countent计数器

1 counter-reset:设置某个选择器出现次数的计数器的值，默认值是0，chrome下可以取小数，任何小数向下取整；

多个以空格分隔，而不是逗号

{
  counter-reset:section1 2 section2 3;
}

2 counter-increment：计数器递增的值，默认为1。

使用content:counter(...)会默认先执行一次counter-increment+counter-reset，所以content默认情况下显示的就是1。

3 counter()和counters()是方法而不是属性，作用就是显示计数。

4 counters(name,string)可以实现计数嵌套

<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>
.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
}

结果：