content计数器

计数器的参数：

1. counter-reset
2. counter-increment
3. counter()
4. counters()

counter-reset

计数器重置的意思，主要给计数器起个名字。
counter()的语法：

counter-reset:name 数字

数字默认值是0不是1。

       .father{
           counter-reset: father 2;
       }
       .father::before{
           content:counter(father);
       }

     <div class="father">
         <div class="son">son</div>
     </div>

counter-reset的计数重置值还可以是负数，如-2
counter-reset还可以多个计数器一起命名。例如

       .father{
           counter-reset: father1 2 father2 3;
       }
       .father::before{
           content:counter(father1);
       }
       .father::after{
           content:counter(father2)
       }

     <div class="father">
         <div class="son">son</div>
     </div>

counter-increment

顾名思义，就是计数器递增的意思。
counter-increment的值为counter-reset的一个或多个关键字，后面可以加递增的变化值，默认值为1。
CSS计数器有一套规则，叫普照规则。具体来讲就是普照源(counter-reset)唯一，每普照一次(counter-increment)一次，普照源增加一次计数值。

       .father{
           counter-reset: father 2;
           counter-increment: father ;
       }
       .father::before{
           content:counter(father);
       }

     <div class="father">
         <div class="son">son</div>
     </div>

counter()/counters()

counter()的语法为

counter(name,style)

例如

       .father::before{
           content:counter(father,lower-roman);
       }

counters()用于嵌套技术，比如1,2,3,4,5这类单个数字的计数形式就使用counter()方法，如果是诸如1.2,1.3,1.4等的子序列，这就需要用到counters()方法了。
counters()的语法为

counters(name,string);

其中，string参数为字符串，表示子序列的连接字符串。例如，1.1的连接字符串就是“.”,1-1的连接字符串就是"-"。name是当前元素所有具有相同类名的祖先元素。

        <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>

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