CSS计数器counters的string参数测试实例页面
回到相关文章 »代码:
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; }
HTML代码:
<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>
效果:
我叫王小二,万万没想到,一着不慎,娃娃连营满地滚:
我是王小二
我是王小二的大儿子
我是王小二的二儿子
我是王小二的二儿子的大孙子
我是王小二的二儿子的二孙子
我是王小二的二儿子的小孙子
我是王小二的三儿子
我是王小三
我是王小四
我是王小四的大儿子