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

发布时间：2020-12-14 18:32:59 所属栏目：资源来源：网络整理

导读：我正在使用nth-child选择器为不同的社交图标添加背景图像.但是,所有图标看起来都是一样的.我究竟做错了什么？ .social-logo { display: inline-block; width: 24px; height: 24px; transition: background-image .2s;}#social-links div:nth-child(1) { back

我正在使用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只有一个元素需要计算.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!