使用CSS选择器的应用样式不起作用

Question

我正在使用循环显示我的列表。

<span v-for="freefeature in freefeatures" v-bind:key="freefeature">
   <i class="fa fa-check-circle free-icons"></i>
   <p>{{freefeature}}</p>
 </span>

我希望第一个i（图标）为橙色，其余为灰色。

我在i上没有free-icons类的多个地方使用此循环，在那里，所有图标仅在此位置需要为橙色，除了第一个图标之外，它们都需要为灰色，因此是“ free-icons”类。] >

我尝试过的事情：

 span i {
     color: orange; }

    span:nth-child(n+2) i.free-icons {
     color: #333;
}
在这种情况下，即使要检查第一个孩子选择器或任何其他CSS选择器也无法使用。我可能做错了什么？

我正在使用循环显示我的列表。

Answer 1

好，使用nth-child(1)或first-child来获得第一个i，更改CSS逻辑，使第一个orange和其他gray

Answer 2

最佳解决方案是拥有一个包装器元素，然后选择其范围