利用CSS计数函数counter()和counters()实现自动计数编号

在li列表中，我们通过list-style-type可轻松实现计数，但无法做到动态更新前面的序号，通过CSS计数函数则可实现。

场景：在下单页面，有对新老用户的判断，对于未登录用户，第一步是选择登录或者注册，第二步是选择用户地址…未登录用户在登录后原来第二步会变成第一步，而已登录过用户第一步就是选择地址。

body {
    /*插入计数器第一个计数器从0开始累加，第二个计数器从1开始累加*/
    counter-reset: section 0 subsec 1;
}
.test,.demo {
    padding: 20px;
    margin-bottom: 50px;
    border: 1px solid #404040;
}
.test>p:before {
    /*获取计数器*/
    content:"" counter(section)". ";
    /*开始累加*/
    counter-increment: section;
}
.demo>p:before {
    /*获取计数器*/
    content: counter(subsec)". ";
    /*开始累加*/
    counter-increment: subsec;
}

<div class="test">
    <p>利用CSS计数函数counter()实现自动计数编号</p>
    <p>利用CSS计数函数counter()实现自动计数编号</p>
    <p>利用CSS计数函数counter()实现自动计数编号</p>
</div>
<div class="demo">
    <p>利用CSS计数函数counter()实现自动计数编号</p>
    <p>利用CSS计数函数counter()实现自动计数编号</p>
    <p>利用CSS计数函数counter()实现自动计数编号</p>
</div>

结果如下所示：

1.利用CSS计数函数counter()实现自动计数编号
2.利用CSS计数函数counter()实现自动计数编号
3.利用CSS计数函数counter()实现自动计数编号

===============================
2.利用CSS计数函数counter()实现自动计数编号
3.利用CSS计数函数counter()实现自动计数编号
4.利用CSS计数函数counter()实现自动计数编号

计数器嵌套counters()

ol {
    counter-reset: minnus 0;
    list-style: none;
}
li:before {
    content: counters(minnus, ".")" ";
    counter-increment: minnus;
}

<ol>
    <li>item</li>          <!-- 1     -->
    <li>item               <!-- 2     -->
        <ol>
            <li>item</li>      <!-- 2.1   -->
            <li>item</li>      <!-- 2.2   -->
            <li>item           <!-- 2.3   -->
            <ol>
                <li>item</li>  <!-- 2.3.1 -->
                <li>item</li>  <!-- 2.3.2 -->
            </ol>
            <ol>
                <li>item</li>  <!-- 2.3.1 -->
                <li>item</li>  <!-- 2.3.2 -->
                <li>item</li>  <!-- 2.3.3 -->
                </ol>
            </li>
            <li>item</li>      <!-- 2.4   -->
        </ol>
    </li>
    <li>item</li>          <!-- 3     -->
    <li>item</li>          <!-- 4     -->
</ol>

结果如下：