2018-07-18 利用counters计数器实现一个简单的目

CSS部分

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

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>

• counter-reset: wangxiaoer;

计数器重置；使用这个为计数器命名为 wangxiaoer；

• counter-increment: wangxiaoer;

计数器递增；用这个来做加一加一加一这种事；
对普照源counter-reset没进行一次普照，即这条语句出现一次，普照源加一
（普照规则 张鑫旭 css世界中提到的）

• content: counters(wangxiaoer, '-') '. ';

counters(name, string) 第一个参数name是计数器的名字，第二个参数string使用‘’包裹起来。
例如counters(wangxiaoer, '-')最终效果应为 1-1.