CSS计数器counters的string参数与嵌套实例页面

展示

去论坛 »

我叫王小二，万万没想到，一着不慎，娃娃连营满地滚：

我是王小二

我是王小二的大儿子

我是王小二的二儿子

我是王小二的二儿子的大孙子

我是王小二的二儿子的二孙子

我是王小二的二儿子的小孙子

我是王小二的三儿子

我是王小三

我是王小四

我是王小四的大儿子

代码

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>

CSS：

.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
}