为什么第n个子选择器不起作用？

小编典典

为什么第n个子选择器不起作用？

css

我正在使用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>

阅读 247

2020-05-16

共1个答案

小编典典

所述nth-child选择器计数的兄弟姐妹（即，元件具有相同父节点）。

在您的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 
              .
              .
              .

2020-05-16