Html 为什么第 n 个子选择器不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41867097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is nth-child selector not working?
提问by Govind Rai
I am using the nth-childselector to add background images for different social icons. However, all icons are appearing the same. What am I doing wrong?
我正在使用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>回答by Michael Benjamin
The nth-childselector counts siblings (i.e., elements having the same parent).
所述nth-child选择器计数的兄弟姐妹（即，元件具有相同父节点）。
In your HTML structure, div.social-logois always the first, last and only child of a. So nth-childhas only one element to count.
在您的 HTML 结构中，div.social-logo始终是a. 所以nth-child只有一个元素要计算。
However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-childcan target each one.
但是，有多个锚元素，它们都是兄弟元素（ 的子元素#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
.
.
.
回答by grinmax
Try this!
尝试这个！
<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
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');
}
Demo live - https://jsfiddle.net/g59wa8uf/
回答by Jesse Bacon
On my test page it was because the <hr />tag will break the count on the selector logic.
在我的测试页面上，这是因为<hr />标签会破坏选择器逻辑的计数。
回答by Naresh Bisht
try adding space between space before ':' example:-
尝试在“：”之前的空格之间添加空格示例：-
tr :nth-child(2)
{
text-align: right;
}
