如何在 <ul> 标签中选择第二个和第三个元素（li）（使用 CSS）？

Question

我有这段代码来选择我的第一个、第二个和第三个 li 标签，但我问自己是否可以将这段代码写得更短。我通常不使用 child() 选择器，所以我对此了解不多。

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

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

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

原文由 Nedim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

链接两个 :nth-child() 伪类以匹配一系列相邻元素：

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

这将选择第二个和第三个 li 就像逻辑 and 运算符一样。

代码笔演示

---

这些伪类链接的效果的视觉结果：

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于第二个孩子，您可以使用

li:nth-child(2){}

和第三个孩子使用

li:nth-child(3){}

原文由 Saurabh Sonawane 发布，翻译遵循 CC BY-SA 3.0 许可协议