Question

我想使用nth-child为不同的图标赋予完全相同的颜色，但是我得到的是每个图标都具有与第一个相同的颜色

.iconHeader:hover:nth-child(1) {
  color: blue;
}
.iconHeader:hover:nth-child(2) {
  color: pink;
}
.iconHeader:hover:nth-child(3) {
  color: lightblue;
}
.iconHeader:hover:nth-child(4) {
  color: red;
}

<ul class="social">
   <h1 class="translatedTextY">follow us</h1>
   <li>
    <a href="#" class="iconHeader"><i class="fab fa-facebook fa-2x"></i></a>
   </li>
   <li>
    <a href="#" class="iconHeader"><i class="fab fa-instagram fa-2x"></i></a>
   </li>
    <li>
    <a href="#" class="iconHeader"><i class="fab fa-twitter fa-2x"></i></a>
   </li>
   <li>
    <a href="#" class="iconHeader"><i class="fab fa-youtube fa-2x"></i></a>
   </li>
</ul>

Answer 1

使用nth-of-type而不是nth-child会更容易，因为它将在父div中搜索该类型的元素，而不管父中的其他元素如何。

我还认为您应该使用“社交”类，因为它是所有图标的父级，而每个iconHeader只是一个图标的父级。

所以你可以这样写：

.social i:nth-of-type(1) {
  color: blue;
}

这将仅针对第一个孩子。

Answer 2

首先，您要定位错误的元素，您需要在 ul 第n个孩子到li 而不是 a.iconHeader >您要添加 h1 ，因此第一个li将成为第二个孩子，因此请使用 nth-of-type而不是nth-child

：nth-of-type（n）选择器匹配第n个元素特定类型的子项，其父项和：nth-child（n）选择器匹配作为第n个子元素的每个元素，无论类型，其父项。

a{
  text-decoration:none;
}

li:nth-of-type(1) .iconHeader{
  color: blue;
}
li:nth-of-type(2) .iconHeader{
  color: pink;
}
li:nth-of-type(3) .iconHeader{
  color: lightblue;
}
li:nth-of-type(4) .iconHeader{
  color: red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<ul class="social">
   <h1 class="translatedTextY">follow us</h1>
   <li>
    <a href="#" class="iconHeader"><i class="fab fa-facebook fa-2x"></i></a>
   </li>
   <li>
    <a href="#" class="iconHeader"><i class="fab fa-instagram fa-2x"></i></a>
   </li>
    <li>
    <a href="#" class="iconHeader"><i class="fab fa-twitter fa-2x"></i></a>
   </li>
   <li>
    <a href="#" class="iconHeader"><i class="fab fa-youtube fa-2x"></i></a>
   </li>
</ul>

Answer 3

您不必使这个复杂化。以下将起作用

.fa-facebook:hover {
  color: blue;
}
.fa-instagram:hover {
  color: pink;
}
.fa-twitter:hover {
  color: lightblue;
}
.fa-youtube:hover {
  color: red;
}

Answer 4

sc0rp1on的答案有效，但是如果您仍然想知道：nth-child（）为何不起作用，那是因为您在选择第n个孩子之前添加了悬停状态。这应该起作用：

.iconHeader:nth-child(1):hover {
  color: blue;
}
.iconHeader:nth-child(2):hover {
  color: pink;
}
.iconHeader:nth-child(3):hover {
  color: lightblue;
}
.iconHeader:nth-child(4):hover {
  color: red;
};

因为要在选择第n个子级之前添加了悬停类，所以将悬停状态应用于该类，因此，包含该类的所有元素都将获得悬停状态。

使用nth-child可能会很有用，因为将来您不必使用不必要的类来弄乱HTML（标记）。

我有第n个孩子的一些问题

4 个答案: