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

CSS部分

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

HTML部分：

    
我是王小二
        

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

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

            
我是王小四的大儿子
        
    

• counter-reset: wangxiaoer;

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

• counter-increment: wangxiaoer;

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

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

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