在CSS文件中特殊的效果替换一般的效果

如下为一个排行榜序号框的css样式，一般的css样式定义好之后，后面会特殊化的是background-color这个属性，一般为蓝色。由于是排行榜，所以期望将排行榜前1 2 3名的序号背景颜色从红色变浅

/*序号格式*/
.list-index{
    display: inline-block;
    color: white;
    line-height: 100%;
    width: 16px;
    padding: 1px;
    font-size: 13px;
    text-align: center;
    margin-right: 3px;
    background-color: #01AAED;
} 

代码实现：

特殊化的时候在HTML代码中需要特殊化的标签加上一个id属性，如以下代码中的id属性：

<span>
      <span id="list-first" class="list-index">1</span>
      <a href="#">用户1</a>
</span>

<span>
      <span id="list-second" class="list-index">2</span>
      <a href="#">用户2</a>
</span>

<span>
      <span id="list-third" class="list-index">3</span>
      <a href="#">用户3</a>
</span>

并在相应css文件中写上 #id{ 特殊化的属性 } 这样的代码，如下：

/*排行榜第一的序号背景颜色*/
#list-first{
    background-color: #d43f3a;
}
/*排行榜第二的序号背景颜色*/
#list-second{
    background-color: #FD482C;
}
/*排行榜第三的序号背景颜色*/
#list-third{
    background-color: #f0ad4e;
}

于是特殊化就完成了，结果图示为：