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; }
结果: