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

单个列表

更改前后对比图

HTML
 <ul class="list">
       <li class="list-item">ECharts</li>
       <li class="list-item">AntV</li>
       <li class="list-item">Vant</li>
   </ul>

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
<ul class="singer">
    <li class="singer-item">周杰伦
        <ul class="song">
            <li class="song-item">安静</li>
            <li class="song-item">告白气球</li>
            <li class="song-item">青花瓷</li>
            <li class="song-item">等你下课</li>
        </ul>
    </li>
    <li class="singer-item">林俊杰
        <ul class="song">
            <li class="song-item">江南</li>
            <li class="song-item">她说</li>
            <li class="song-item">爱笑的眼镜</li>
            <li class="song-item">一千年以后</li>
        </ul>
    </li>
</ul>

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