我正在使用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
.
.
.
问题内容: 我真的不明白为什么以下选择器可以按预期工作(即): 但这不是: 该是的后代,这又是的后代,但他们也彼此的孩子。因此,我认为选择器也会起作用。 为什么选择器在这里不起作用? 问题答案: 在HTML中,浏览器会隐式添加一个元素,以在其中包含元素1,因此实际上,它绝不是的子元素。 因此,您必须改为执行以下操作: 当然,如果您自己添加元素,则使用相同的选择器。该规范时说明添加隐含否则: ##
问题内容: 我有一个包含多个标签的标签。 我只能为第一个标记设置CSS属性: 但是,我以下尝试为除第一个标签之外的其他每个标签设置CSS属性不起作用: 如何在CSS中编写“除第一个元素外的每个元素”? 问题答案: 一个您发布的版本的实际工作为所有现代浏览器(如CSS选择3级的支持: 如果您需要支持旧版浏览器,或者由于选择器的限制(仅接受一个简单的选择器作为参数)而受到阻碍,则可以使用另一种技术:
我有一个标签,包含几个标签。 我只能为第一个标记设置CSS属性: 但是,我下面尝试为每个标记设置CSS属性,但第一个除外,但都不起作用: 我如何用CSS写:“每个元素,除了第一个”?
问题内容: 我检查这个选择器: 选择器不起作用? 我在firefinder中检查了此内容,但没有返回任何内容(没有信息显示零元素) 然后检查: 并返回h3,所以选择器几乎是不错的选择,但是this(h3的文本为’a’)的文本出错。 问题答案: 不是 原本是CSS3选择器感谢TJCrowder的链接,但它没有做到,很可能是因为它的工作方式往往会导致严重的性能和过度选择问题。例如,如果元素匹配给定的字
问题内容: 我有这样的布局: 使用以下CSS规则: 我使用jQuery将类添加到没有其他类之一的扇区中,或者: 然后,我对该类应用一些不同的规则: 一切都可以在现代浏览器中完美运行。 但是看到jQuery中的选择器是基于CSS3的,我想我可以将其直接移到样式表中,这样我就不必依靠使用jQuery添加额外的类了。此外,我对支持IE的较旧版本并不感兴趣,其他浏览器也对选择器提供了出色的支持。 因此,我
问题内容: 以下是我的HTML页面的摘要: 在这里我想选择id =’platinum’的第三个td元素 我试过的是。 和 两者对于如何选择第三个td都不起作用 问题答案: 有一个没有ID 的空值,这会干扰计数。选择器的意思是“第n个元素”,而不是“第n个元素”。因此,具有该ID 的第三个实际上是整个行中的第四个。 使用CSS选择器无法选择具有特定ID 的第三个元素。您应该改用XPath: