如果每个图标都有相同的类，我如何独立控制它们

Question

我希望第一个框中的图标是白色的，其他框是不同的颜色。这是的箱子

.long-arrow-right {
width: 100%;
text-align: right;

}
.fa.fa-long-arrow-right:before {
content: "f30b";
font-size: 20px;
color: #000;
}

<span class="long-arrow-right">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i></span>

Answer 1

如果你想在你的第一个图标上使用另一种颜色，你可以使用：第一种类型的

.myClass {
color: blue;
}
.myClass:first-of-type {
color: red;
}

<p class="myClass">1</p>
<p class="myClass">2</p>
<p class="myClass">3</p>

另一种解决方案是不可能的(IMO(，您无法控制具有相同类的元素，因为您无法识别它们。您必须添加唯一ID。

Answer 2

您可以添加多种方式

1. 您可以使用第n个子概念

2. 您可以将类用于活动元素

3. 您可以使用活动ID，也可以更改颜色

   1. 方式

   .long-arrow-right {
   width: 100%;
   text-align: right;
   }
   .fa.fa-long-arrow-right:before {
   content: "f30b";
   font-size: 20px;
   color: #000;
   }
   .long-arrow-right:first-child .fa.fa-long-arrow-right:before{
   color:red;
   }

   <span class="long-arrow-right">
   <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
   </span>
   <span class="long-arrow-right">
   <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
   </span>
   <span class="long-arrow-right">
   <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
   </span>

2.way

.long-arrow-right {
width: 100%;
text-align: right;
}
.fa.fa-long-arrow-right:before {
content: "f30b";
font-size: 20px;
color: #000;
}
.fa.fa-long-arrow-right.active:before{
color:red;
}

<span class="long-arrow-right">
<i class="fa fa-long-arrow-right active" aria-hidden="true"></i>
</span>
<span class="long-arrow-right">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span>
<span class="long-arrow-right">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span>