《CSS世界》第四章学习心得——深入理解content（下）

本文链接：https://blog.csdn.net/qq_22182279/article/details/80251555

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;
}

结果：