在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>
结果如下: