使用 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(图标(是橙色的，其余的是灰色的。

我在多个地方使用此循环，而没有 free icon 类，所有图标只需要在这个地方为橙色，除了第一个，因此类"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

span i {
color: #333;
}
span i.free-icons:first-child {
color: orange;
}

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

<i class="fa fa-check-circle free-icons">X</i>
<p>{{freefeature}}</p>

<i class="fa fa-check-circle free-icons">X</i>
<p>{{freefeature}}</p>
</span>

更新：备用逻辑正在使用:not，像这样排除第一个孩子：

span i.free-icons:not(:first-child) {
color: #333;
}
span i {
color: orange;
}

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

<i class="fa fa-check-circle free-icons">X</i>
<p>{{freefeature}}</p>

<i class="fa fa-check-circle free-icons">X</i>
<p>{{freefeature}}</p>
</span>

Answer 2

最好的解决方案是拥有一个包装元素，然后选择通过它的跨度

span i {
color: #333;
}
.wrapper span:first-child i.free-icons {
color: orange;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="wrapper">
<span>
<i class="far fa-check-circle free-icons"></i>
<p>Feature1</p>
</span>
<span>
<i class="far fa-check-circle free-icons"></i>
<p>Feature2</p>
</span>
<span>
<i class="far fa-check-circle free-icons"></i>
<p>Feature3</p>
</span>
<span>
<i class="far fa-check-circle free-icons"></i>
<p>Feature4</p>
</span>
</div>