css counter(计数器)

counter

counter-reset 创建或重置一个计数器
num定义从几开始（数字不写默认为0从1开始）

• counter-reset：name1 num1 name2 num2
• counter-reset：amin 1 peng 2 shan 3

counter-increment定义一个或多个计数器自增长
num定义一次增加几个数（数字不写默认为递加1）

• counter-increment：name1 num1 name2 num2
• counter-increment：amin 1 peng 2 shan 3

   .box {
            /*数字0  表示从1开始*/
            /*amin 为0 从0+increment开始  peng为2 从2+increment开始*/
            counter-reset: amin peng 2;
        }

      .test {
            display: inline-block;
            margin-right: 50px;
        }

        .test:before
        {
            /*shan为0 从0+increment开始 qian为5 从5+increment开始*/
            counter-reset: shan qian 5;
            /*increment后面的num不写 默认递加1*/
            counter-increment:amin;
            /*从0+increment开始 即1开始*/
            content:"敏" counter(amin) ".";
            color: orangered;
            font-weight: bold;
        }

        .child:before
        {
            /*shan increment后面的num不写 默认递加1*/
            /*peng increment后面的num为2 递加2*/
            counter-increment:shan peng 2;
            /*peng从2+increment开始 即4开始*/
            /*shan从0+increment开始 即1开始*/
            content:"鹏" counter(peng) ".珊" counter(shan);
            color: mediumpurple;
            font-size: 18px;
            font-weight: bold;
        }

        .child2:before {
            /*qian increment后面的num为3 递加3*/
            counter-increment:qian 3;
            /*content从5+increment  即8开始*/
            content:"倩" counter(qian);
            color: deepskyblue;
            font-size: 18px;
            font-weight: bold;
        }

 <div class="box">
    <div class="test">
         我就是个试验的
         <p class="child">试验个锤子</p>
         <p class="child">试验个锤子</p>
         <p class="child">试验个锤子</p>
         <p class="child">试验个锤子</p>
     </div>
     <div class="test">
         我就是个试验的
         <p class="child">试验个锤子</p>
         <p class="child">试验个锤子</p>
         <p class="child">试验个锤子</p>
         <p class="child">试验个锤子</p>
     </div>
     <div class="test">
         我就是个试验的
         <p class="child2">试验个锤子</p>
         <p class="child2">试验个锤子</p>
         <p class="child2">试验个锤子</p>
         <p class="child2">试验个锤子</p>
     </div>
 </div>