Question

<div class="icons">
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a>
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a>
</div>

我想将div中的每个图标单独放置，我如何在CSS中单独选择图标？ .icons a {编辑了div中的所有图标，因此我无法控制定位。

Answer 1

您可以使用第一胎和最后一胎。

/segments?

如果有两个以上的孩子，您可以使用.icons a:first-child { color: red; } // just affects facebook-link .icons a:last-child { color: blue; } // just affects twitter-link

您也可以直接按类设置链接的样式：

:nth-child(x)

Answer 2

如果你试图独立定位每个锚标记（并且你不想使用你已经拥有的那些方便的类[1]），你可以使用nth-child伪选择器：

＆＃13;

.icons > a:nth-child(1){background:red;}
.icons > a:nth-child(2){background:green;}

＆＃13;

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">


<div class="icons">
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a>
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a>
</div>

＆＃13;

检查browser support for nth-child。

[1]：你正在使用fontawesome fa-facebook和fa-twitter类，为什么不选择那些？

＆＃13;

.icons > a.fa-facebook{background:red;}
.icons > a.fa-twitter{background:green;}

＆＃13;

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">


<div class="icons">
<a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a>
<a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a>
</div>

＆＃13;

附录：是的，您可以使用其他答案中指出的first-child和last-child。我确实写了我的答案，假设会有更多的图标，所呈现的代码只是一个最小的例子。但是，如果您只需要两个，请随时使用first-child和last-child。

Answer 3

您可以尝试使用pseudo class。

例如，解决问题的一种方法是：

.icons a:first-child {}和.icons a:last-child {}

Answer 4

如果你有两个以上的孩子，你可以使用伪元素 :first-child，:last-child，当然还有:nth-child(x)。请查看下面的代码段以供参考。

＆＃13;

.icons a:first-child {
  color: red;
}

.icons a:nth-child(2) {
  color: green;
}

.icons a:nth-child(3) {
  color: cyan;
}

.icons a:last-child {
  color: yellow;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icons">
  <a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a>
  <a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a>
  <a href="https://www.facebook.com/" class="fa fa-facebook" alt="facebook" title="Facebook"></a>
  <a href="https://twitter.com/" class="fa fa-twitter" alt="twitter" title="Twitter"></a>
</div>

＆＃13;

Answer 5

你可以尝试的一件事是使用jQuery迭代它们：

$(".icons a").each(function(index, element){
     //index is the current element index
     //element is the a tag
});

如何在CSS中选择此特定行？

5 个答案: