html – 为什么nth-child选择器不工作？

我正在使用nth-child选择器为不同的社交图标添加背景图像.但是,所有图标看起来都是一样的.我究竟做错了什么？

.social-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: background-image .2s;
}

#social-links div:nth-child(1) {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg');
}

#social-links div:nth-child(1):hover {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg');
}

#social-links div:nth-child(2) {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg');
}

#social-links div:nth-child(2):hover {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg');
}

#social-links div:nth-child(3) {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg');
}

#social-links div:nth-child(3):hover {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg');
}

#social-links div:nth-child(4) {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg');
}

#social-links div:nth-child(4):hover {
    background-image: url('https://MysqL-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg');
}

<div id="social-links">
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
</div>

解决方法

第n个子选择器对兄弟姐妹(即具有相同父母的元素)进行计数.

在您的HTML结构中,div.social-logo始终是a的第一个,最后一个和唯一的子级.所以nth-child只有一个元素需要计算.@H_301_11@

但是,有多个锚元素,所有这些都是兄弟姐妹(#social-links的子节点),因此nth-child可以定位每个元素.@H_301_11@

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div 
#social-links a:nth-child(3) div 
              .
              .
              .

html – 为什么nth-child选择器不工作？

解决方法

猜你在找的HTML相关文章