SOURCE

<h2>设置一个默认计数器</h2>
<div class="box-1">
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>Bootstrap</p>
    <p>Vue</p>
    <p>React</p>
    <p>jQuery</p>
</div>


<h2>设置一个计数器，并且设置计数器的初始值为2，它会从3开始</h2>
<div class="box-2">
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>Bootstrap</p>
    <p>Vue</p>
    <p>React</p>
    <p>jQuery</p>
</div>


<h2>设置一个计数器，并且设置计数器的初始值为2，它会从3开始</h2>
<div class="box-3">
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>Bootstrap</p>
    <p>Vue</p>
    <p>React</p>
    <p>jQuery</p>
</div>


<h2>
    使用counter-set: my-counter-4 1;设置一个计数器，并且设置计数器的初始值为1
    并且：counter-increment: my-counter-4 -1设置为每次使用会计数器会进行计算;
</h2>
<div class="box-4">
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>Bootstrap</p>
    <p>Vue</p>
    <p>React</p>
    <p>jQuery</p>
</div>


<h2>我们可以使用计数器实现文章的一级二级标题效果</h2>
<div class="box-5">
    <h3>前端开发</h3>
    <h4>JavaScript</h4>
    <p>Prototype</p>
    <p>jQuery</p>
    <p>Backbone.js</p>
    <p>require.js</p>
    <p>vue.js</p>
    <p>react.js</p>
    <p>angular.js</p>
    <h4>CSS</h4>
    <p>css2</p>
    <p>css3</p>
    <p>less</p>
    <p>sass</p>
    <p>stylus</p>
    <h4>HTML</h4>
    <p>HTML 4</p>
    <p>HTML 5</p>
    <h3>后端开发</h3>
    <h4>PHP</h4>
    <p>Laravel</p>
    <p>ThinkPHP</p>
    <p>Yii</p>
    <p>CodeIgniter</p>
    <p>Symfony</p>
    <h4>Java</h4>
    <p>Spring</p>
    <p>JUnit</p>
    <p>Velocity</p>
    <p>Hibernate</p>
</div>

.box-1{
  /* 重置一个名为 "my-counter-1"计数器，并且从0开始 */
  counter-reset: my-counter-1;
}

.box-1 p::before {
  /* 每次使用计数器的时候都会自动增加1,这里从开始为0+1，所以就是1开始显示
  increment字面意思是递增 */
  counter-increment: my-counter-1;
  content: "基础 " counter(my-counter-1) "、 ";
}


.box-2{
    /* 这里重置一个计数器，并且设置一个开始初始值为2 */
    counter-reset: my-counter-2 2;
}
.box-2 p::before {
  /* 每次使用计数器的时候都会自动增加1，所以第一个显示的数字为3 */
  counter-increment: my-counter-2;
  content: "基础 " counter(my-counter-2) "、 ";
}



.box-3{
    /* 这里重置一个计数器，并且设置一个开始初始值为5 */
    counter-reset: my-counter-3 5;
}
.box-3 p::before {
  /* 每次使用计数器的时候都会自动增加2，所以第一个显示的数字为5+2=7，9,11...以此类推 */
  counter-increment: my-counter-3 2;
  content: "基础 " counter(my-counter-3) "、 ";
}


.box-4{
    /* 这里重置一个计数器，并且设置一个开始初始值为5 */
    counter-set: my-counter-4 1;
}
.box-4 p::before {
  /* 每次使用计数器的时候都会自动增加-1，也就是减1，所以第一个显示的数字为1-1=0，-1,-2...以此类推 */
  counter-increment: my-counter-4 -1;
  content: "基础 " counter(my-counter-4) "、 ";
}



.box-5 {
  /* Set "subsection" to 0 */
  counter-set: Title_1 0;
}

.box-5 h3::before {
  counter-increment: Title_1;
  content: "方向 " counter(Title_1) ": ";
}
.box-5 h3{
    counter-set: Title_2 0;
}
.box-5 h4::before{
    counter-increment: Title_2;
    content: "语言 " counter(Title_1) "." counter(Title_2) ": ";
}
.box-5 h4{
    counter-set: Title_3 0;
}

.box-5 p::before {
  counter-increment: Title_3;
  content: "框架： " counter(Title_1) "." counter(Title_2) "." counter(Title_3) " ";
}