我想使用第 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>
最佳答案
使用 nth-of-type 而不是 nth-child 会更容易,因为它将在父 div 中搜索该类型的元素,而不考虑父元素中的其他元素。
我还认为您应该使用“社交”类,因为它是所有图标的父级,而每个 iconHeader 只是一个图标的父级。
所以你可以这样写:
.social i:nth-of-type(1) {
color: blue;
}
这将只针对第一个 child 。
关于html - 我对第 n 个 child 有一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56801988/