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>
                

效果:

我叫王小二,万万没想到,一着不慎,娃娃连营满地滚:
我是王小二
我是王小二的大儿子
我是王小二的二儿子
我是王小二的二儿子的大孙子
我是王小二的二儿子的二孙子
我是王小二的二儿子的小孙子
我是王小二的三儿子
我是王小三
我是王小四
我是王小四的大儿子