为什么 nth-child 选择器不起作用? [英] Why is nth-child selector not working?

问题描述

我正在使用 nth-child 选择器为不同的社交图标添加背景图片.但是，所有图标都显示相同.我做错了什么?

I am using the nth-child selector to add background images for different social icons. However, all icons are appearing the same. What am I doing wrong?

.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>

推荐答案

nth-child 选择器计算同级(即具有相同父级的元素).

The nth-child selector counts siblings (i.e., elements having the same parent).

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

In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.

但是，锚元素有多个，都是兄弟元素(#social-links的子元素)，所以nth-child可以分别定位.p>

However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.

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

这篇关于为什么 nth-child 选择器不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！