Question

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

＆＃13;

.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');
}

＆＃13;

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

＆＃13;

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

Answer 2

试试这个！

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

CSS

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

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

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

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

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

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

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

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

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

现场演示 - https://jsfiddle.net/g59wa8uf/

Answer 3

尝试在'：'之前的空格之间添加空格例如：-

tr :nth-child(2)
{
text-align: right;
}

Answer 4

在我的测试页上，是因为

标记将破坏选择器逻辑上的计数。

Answer 5

我想提一下，在我使用 React 和 node-sass 的情况下，如果我只传递 nth-child，1 属性不起作用，我需要指定 1n 以使其工作。所以最终它会这样工作：

.myClass {
  &:nth-child(1n)     { color: red; }
  &:nth-child(2n + 1) { color: blue; }
}

为什么nth-child选择器不起作用？

5 个答案: