我正在使用
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>
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
.
.
.
在“:”之前添加空格 示例:-
tr :nth-child(2)
{
text-align: right;
}
我想提一下,在我的例子中,当使用 React 和 node-sass 时,如果我只传递
nth-child
,则 1
属性不起作用,我需要指定 1n
才能使其工作。所以最终它的工作原理是:.myClass {
&:nth-child(1n) { color: red; }
&:nth-child(2n + 1) { color: blue; }
}
试试这个!
<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');
}
在我的测试页面上,这是因为
<hr />
标签会破坏选择器逻辑的计数。