html为什么选择器不起作用,html – 为什么nth-child选择器不工作？

最新推荐文章于 2023-09-19 10:30:00 发布

大学资源

最新推荐文章于 2023-09-19 10:30:00 发布

阅读量302

点赞数

文章标签： html为什么选择器不起作用

我正在使用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');

}

关注