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;

計數(shù)器重置；使用這個為計數(shù)器命名為 wangxiaoer；

• counter-increment: wangxiaoer;

計數(shù)器遞增；用這個來做加一加一加一這種事；
對普照源counter-reset沒進行一次普照，即這條語句出現(xiàn)一次，普照源加一
（普照規(guī)則 張鑫旭 css世界中提到的）

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

counters(name, string) 第一個參數(shù)name是計數(shù)器的名字，第二個參數(shù)string使用‘’包裹起來。
例如counters(wangxiaoer, '-')最終效果應為 1-1.