利用CSS的counter计数器更改列表（包括不限于ul/ol ）的默认样式

有时候列表的默认样式并不满足需求，就需要我们进行重新改造了

单个列表

更改前后对比图

HTML
 

       
ECharts
       
AntV
       
Vant
   

CSS
.list{
        list-style:none
    }
    .list-item{
        counter-increment:index;
        position:relative
    }
    .list-item::before{
        content:counter(index);
        display:inline-block;
        width:20px;
        height:20px;
        border-radius:50%;
        text-align:center;
        vertical-align: top;
        font-size:15px;color:#fff;
        background:#2DB9EE;
        margin-right:12px;
    }

嵌套列表

效果图

HTML

    
周杰伦
        

            
安静
            
告白气球
            
青花瓷
            
等你下课
        
    
    
林俊杰
        

            
江南
            
她说
            
爱笑的眼镜
            
一千年以后
        
    

CSS
.singer , .song{
        list-style:none;
        counter-reset: item;
    }
    .singer-item::before{
        counter-increment: item;
        content: counters(item, ".") " ";
        display:inline-block;
        width:20px;
        height:20px;
        border-radius:50%;
        text-align:center;
        vertical-align: top;
        font-size:15px;color:#fff;
        background:#2DB9EE;
        margin-right:12px;
    }
    .song-item::before{
        counter-increment: item;
        content: counters(item, ".") " ";
        display:inline-block;
        font-size:15px;
        margin-right:12px;
    }