如何在<ul>标签(带有CSS)中选择第二和第三个元素(Li)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (2903)

我有这个代码来选择我的第一个,第二个和第三个li标签,但我问自己是否可以更短地编写这个代码。 我通常不使用child()选择器,所以我不太了解它。

ul > :first-child{
    margin-right: 50px;
}

ul > :first-child + li{
    margin-right: 50px;
}

ul > :first-child + li + li{
    margin-right: 50px;
}
提问于
用户回答回答于

链二:nth-child()匹配一系列相邻元素的伪类:

li:nth-child(n+2):nth-child(-n+3) {
  margin-right: 50px;
}

这将同时选择第二个和第三个li表现得像个LOGOCALand接线员。

Codepen演示


链接的这些psuedoclass的效果的视觉结果:

用户回答回答于

所有的答案都是正确的。总之,你的代码应该如下所示:

ul > li:first-child {
    margin-right: 50px;
}

ul > li:nth-child(2) {
    margin-right: 50px;
}

ul > li:nth-child(3) {
    margin-right: 50px;
}

扫码关注云+社区

领取腾讯云代金券