counter-reset

counter-reset计数器-重置,也可以理解为计数器命名；

声明一个计数器，名称为myCounter，示例如下：

.counter { counter-reset: myCounter;}

计数器的默认起始值是从0开始；也可以改变起始值,比如改为10；

.counter { counter-reset: myCounter 10;}

也可以一次声明多个计数器：myCounter 默认从10开始，myCounter2从1开始

.counter { counter-reset: myCounter 10 myCounter2 1;}

counter()

counter()是计数器的方法,用于显示计数；还有一个counters(),后面会讲到；

语法如下,两个参数，

counter(name);
counter(name, style);

/*
`name`:计数器名称，
`style`递增递减可以不一定是数字，还可以是英文字母，或者罗马文,支持的关键字值就是`list-style-type`支持的那些值
（disc | circle | square | decimal | lower-roman | upper-roman）等
*/

我们现在有了myCounter计数器，展示的时候需要使用:before或者:after伪元素；因为CSS计数器只能跟content属性在一起的时候才有作用，而我们使用content属性的时候，往往伴随着:before或者:after

示例代码如下：

.counter { counter-reset: myCounter 10; font-size: 100px;color: red}
.counter:before { 
    content: counter(myCounter);
}

<div class="counter"></div>

第二个style参数, 展示大写罗马数字

<style>
.counter { counter-reset: myCounter 4; font-size: 100px;color: red}
.counter:before { 
    content: counter(myCounter, upper-roman);
}
</style>
<body>
    <div class="counter"></div>
</body>

counters()

counters() 方法比上面的counter()多了一个s,意味着可以实现更多的效果，

我们平时的序号，不只是1,2,3,4,.., 还可能有 1.1,1.2,1.3,...等的子序号。后者就是counters()干的事情。

语法如下：

counters(name, string);

示例如下：

<style>
.reset { padding-left: 20px; counter-reset: myCounter; color: red; }
.counter:before { content: counters(myCounter, '-')'.'; counter-increment: myCounter; }
</style>
<body>
    <div class="reset">
        <div class="counter">我是1
            <div class="reset">
                <div class="counter">我是1-1</div>
                <div class="counter">我是1-2
                    <div class="reset">
                        <div class="counter">我是1-2-1</div>
                        <div class="counter">我是1-2-2</div>
                        <div class="counter">我是1-2-3</div>
                    </div>
                </div>
                <div class="counter">我是1-3</div>
            </div>
        </div>
        <div class="counter">我是2</div>
        <div class="counter">我是3
            <div class="reset">
                <div class="counter">我是3-1</div>
            </div>
        </div>
    </div>
</body>

counter-increment

在上面counters()的示例里面出现了counter-increment这个属性，如果没有添加这个属性，效果应该是下面的样式：

所以大概能够猜到这个属性是做数字计数累加的；没错，就是“计数器-递增”的意思。

这变化的值不一定是1，我们可以灵活设置

counter-increment: myCounter 2

学习记录-css的counter计数器

counter-reset

counter()

counters()

counter-increment