CSS3 counter 的用法

counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上,它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:

counter-reset: count 0 /*标识计数器count从1开始*/
counter-reset: count2 2 /*标识计数器count2 从3开始*/
counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器,count1,count2,count3*/


counter-increment 表明计数器实际用到的范围 。他的值也包括两部分:第一个为计数器的名字,即counter-reset设置好的名字,第二个值标识递增的值(默认为1),比如:

counter-increment: count 1 /*表明每次递增 1*/  
counter-increment:count 2 /*表明每次递增 2*/


配合伪类 before 或 after 食用

.article-container{
  margin-top: 30px;
  .article-list{
    counter-reset:num1 0;
    .article-item{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #898989;
      a{
        font-size: 15px;
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      a::before{
        counter-increment:num1 1;
        content: counter(num1)". ";
      }
    }
  }
}


效果:




参考:

https://www.runoob.com/cssref/pr-gen-counter-increment.html

https://www.cnblogs.com/jiajia123/p/9053587.html