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

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

Answer 1

使用两个:nth-child()伪类来匹配一系列相邻的元素：

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

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

Codepen演示

---

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

- Fabrizio Calderan

---

谢谢，但我不明白"(n+2)"和"(-n+3)"是什么意思。如果我想选择我的第一个、第二个和第三个li标签而不是第四个呢？ - Nedim

我刚刚发布的绘图可能会给你一些提示。如果没有，请将 n+2 更改为 n+1（或者简单地省略第一个伪类）。在这个例子中，2 和 3 分别是下限和上限。 - Fabrizio Calderan

为什么不只使用nth-child(1)，nth-child(2)等呢？ - Caner SAYGIN

因为如果您需要选择更大范围的元素（例如1-4），那么这种方式会导致声明变得更长。 - Fabrizio Calderan

我已经使用nth-of-type（和nth-child）多年了，但从不知道你可以使用它两次来获取交集。另外：艺术作品很棒 :) - Matt Lacey

Answer 2

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

li:nth-child(2){}

并且对于第三个子元素使用

li:nth-child(3){}

- Saurabh Sonawane

---

这个很容易使用，但只是复制粘贴的工作，所以我更喜欢使用一些更短的东西 :) 不管怎样，谢谢你。 - Nedim

Answer 3

CSS有一个专门用于此的:nth-child选择器。您可以像这样操作：

ul > li:nth-child(3){ ... }

在此处阅读有关此处的更多信息。

- Nijraj Gelani

---

谢谢，比如说我怎样可以同时选择第一、第二和第三个li标签呢？ - Nedim

Answer 4

所有答案都是正确的。总结一下，你的代码应该是这样的：

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

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

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

- Valentin Seehausen

---

这个代码运行得很好，但我发现有比这更短的代码 :D 感谢 @fcalderan 给了我这段代码： li:nth-child(n+1):nth-child(-n+3) { margin-right: 50px; } - Nedim

这只影响前三个元素，还是也会影响第六个元素？@NedimKurt - Valentin Seehausen