CSS3伪类子代选择器nth-child()的用法

项目场景：

数据中台智能问答弹窗热门问答列表

---

问题描述

---

解决方案：

nth-child()对应样式

<ul class="right-main">
  <li v-for="(item, index) in hotQuesList" :key="index">
    <div class="right-main-span">{{ index + 1 }}</div>
    <div class="right-main-text">{{ item.value }}</div>
  </li>
</ul>

// nth-child()对应样式 
li:nth-child(1) .right-main-span {
  background-color: red;
}
li:nth-child(2) .right-main-span {
  background-color: #de752b !important;
}
li:nth-child(3) .right-main-span {
  background-color: #fbbf2b;
}

效果：