如何为不同的<a> tags in a set</a>应用不同的颜色

Question

我有点被卡住了......

我正试图让这4个图标的颜色不同

<div class="row centered">
        <div class="row centered">
            <div class="col-lg-8 col-lg-offset-2 w">
                <a  title="Twitter" href="http://twitter.com/itsjaymem" target="_blank" > <i class="fa fa-twitter fa-4x"></i></i></a> 
                <a  title="JimmyP.co" href="http://jimmyp.co" target="_blank"><i class="fa fa-code fa-4x"></i></a>
                <a  title="Instagram" href="http://instagram.com/itsjaymem" target="_blank"><i class="fa fa-instagram fa-4x"></i></a>
                <a  title="Email Me!" href="mailto:jayme@jimmyp.co"><i class="fa fa-envelope fa-4x"></i></a>
            </div>
        </div>
</div>

Answer 1

像这样使用:nth-child伪类，

<强> FIDDLE DEMO >>

.w a:nth-child(1)
{
    color:#FF0000;
}
.w a:nth-child(2)
{
    color:#FF00FF;
}
.w a:nth-child(3)
{
    color:#CCCCCC;
}
.w a:nth-child(4)
{
    color:#FFFF00;
}

详细参考:nth-child HERE >>

Answer 2

您可以使用nth-of-type定位每个元素，也可以使用element[attr=val]唯一地定位这些元素并为其指定颜色。

如果您要使用nth-of-type，可以将其写为

div.col-lg-8 a:nth-of-type(1) i {
   color: #f00;
}

或者，如果您使用element[attr=val]选择器，则可以将其写为

div.col-lg-8 a[class*="fa-twitter"] i {
   color: #f00;
}

---

您也可以直接将颜色分配给相应的类，只有当您要在单个元素上使用它时，才能将其写为......

.fa.fa-twitter {
   color: #f00;
}

Answer 3

试试这个：

 .fa-twitter{
    background-color:Red;
 }
 .fa-code{
    background-color:Green;
 }
 .fa-instagram{
    background-color:Yellow;
 }
 .fa-envelope{
    background-color:Blue;
 }

注意：您的代码中存在错误：

更改此

<i class="fa fa-twitter fa-4x"></i></i>

要

<i class="fa fa-twitter fa-4x"></i>

Answer 4

您可以尝试的一件事是为这些图标标记添加“id”。

<强> HTML

<a  title="Twitter" href="http://twitter.com/itsjaymem" target="_blank" > 
<i class="fa fa-twitter fa-4x" id="twitter-icon"></i></i></a>

然后在您的CSS上，您将定位“id”并使用背景颜色。

<强> CSS

#twitter-icon { background-color=blue; }