Html 为什么第n个子选择器不工作？

我正在使用

nth child

选择器为不同的社交图标添加背景图像。但是，所有图标都显示相同。我做错了什么

。社交标志{
显示：内联块；
宽度：24px；
高度：24px；
过渡：背景图像；
}
#社会联系科：第n名儿童（1）{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg'）；
}
#社交链接部门：第n个孩子（1）：悬停{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin copy.svg'）；
}
#社会联系科：第n名儿童（2）{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribble.svg'）；
}
#社交链接部门：第n个孩子（2）：悬停{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribble copy.svg'）；
}
#社会联系科：第n名儿童（3）{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg'）；
}
#社交链接部门：第n个孩子（3）：悬停{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-电子邮件copy.svg'）；
}
#社会联系科：第n名儿童（4）{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg'）；
}
#社交链接部门：第n个孩子（4）：悬停{
背景图像：url（'https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-instacopy.svg'）；
}

---

第n个子元素的

选择器计算同级元素（即具有相同父元素的元素）

在HTML结构中，
div.social-logo
始终是
a
的第一个、最后一个和唯一的子项。所以第n个子元素只有一个元素要计数

但是，存在多个锚元素，所有锚元素都是兄弟姐妹（社交链接的孩子），因此第n个孩子可以针对每个锚元素

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

试试这个

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

Demo live-
在我的测试页面上，这是因为
标记将打破选择器逻辑上的计数
 在“：”之前添加空格
例如：-

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

我想提到的是，在我使用React和node sass的情况下，如果我只传递了
1
，那么
n子属性就不起作用，我需要指定
1n
，以便它起作用。因此，最终它的工作原理是：

.myClass{
&：n子（1n）{颜色：红色；}
&：n第n个子（2n+1）{颜色：蓝色；}
}
啊，我花了一段时间才明白这一点，但你绝对是对的。在这种情况下，您是否建议我为每个div添加一个类，因为这个规则集（至少对我来说）不太可读。nth-child可以正常工作。你只需要正确地应用它。请记住，它总是适用于（并计算所有）兄弟姐妹。我提供了一个规范的答案，但它与一个关于完全无关主题的思考不周的问题相切，这使得它成为一个不合适的重复目标。我正在考虑将标准答案迁移到一个新问题，题目是“像：first child和：nth-child（）这样的选择器是否在父元素或子元素上？”你怎么看？@Michael_B：写不好的问题标题很容易，写好的问题标题却极其困难。我还没有发布标准答案，但是，看看旧的那一个发生了什么：对我来说，情况正好相反。我必须删除
li
和
nth
之间的空格，使其像这样工作
li:nth child（2n）{
@RBT我从您最初的答案开始，然后切换到Naresh的答案。Naresh的答案对我有效。请看，您已将chid的索引硬编码为第n个子选择器样式。它不应该是一个表达式，例如
2n
，
2n+1
，等等。如果您在括号中简单地放一个数字，它将只匹配该数字例如，下面是如何仅选择第5个元素：
ulli:nth child（5）{color:#ccc；}
。更多详细信息
tr :nth-child(2)
{
    text-align: right;
}