CSS counters是怎么计算的？

Question

最近在看张旭鑫的一片关于css计数器的文章，链接是https://www.zhangxinxu.com/wo...，看到下面这一块就是不理解，如下图1.1和1.2是嵌套在两个reset里面，但是1.3和1.4只是嵌套在最外层的reset里面，为什么他们会接上？counters内部是怎么计算的，求大佬解释

CSS代码：

.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; font-family: arial black; }
.reset ~ .counter { color: #cd0000; }

HTML代码：

<div class="reset">
    <div class="counter">我是王小二</div>
    <div class="reset">
        <div class="counter">我是王小二的大儿子</div>
        <div class="counter">我是王小二的二儿子</div>
        <div class="reset">
            <div class="counter">我是王小二的二儿子的大孙子</div>
            <div class="counter">我是王小二的二儿子的二孙子</div>
            <div class="counter">我是王小二的二儿子的小孙子</div>
        </div>
        <div class="counter">我是王小二的三儿子</div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四</div>
    <div class="reset">
        <div class="counter">我是王小四的大儿子</div>
    </div>
</div>

Answer 1

它就是一个自动计数器，计算盒模型为display:list-item;的样式，counter-reset: counter-name; 重置你的计数器名称, 定义在body中有效，counter-increament: counter-name; 说明定义的计数器是自增的，然后定义伪元素::before或::after的content: "Note "counter(note-counter, upper-roman) ":" 定义列表项标签的显示内容和格式。demo