我正在使用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>
解决方法
第n个子选择器对兄弟姐妹(即具有相同父母的元素)进行计数.
在您的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
.
.
.
