html - 我对第 n 个 child 有一些问题

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;
}

这将只针对第一个 child 。