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

【问题标题】：How to choose second and third element (li) in <ul> tag (with CSS)?如何在 <ul> 标签中选择第二个和第三个元素（li）（使用 CSS）？
【发布时间】：2018-12-22 01:17:22
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css css-selectors html-lists

【解决方案1】：

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

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

这将选择第二个和第三个li 表现得像逻辑 and 运算符。

Codepen Demo

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

【讨论】：

谢谢，但我不懂“(n+2)”和“(-n+3)”。如果我想选择我的第一个、第二个和第三个 li 标签而不是第四个呢？
我刚刚发布的抽奖可能会给您一些提示。如果没有，只需将n+2 更改为n+1（或者干脆省略第一个伪类）。在这个例子中，2 和 3 分别是下限和上限
为什么不只使用nth-child(1)、nth-child(2)等？
因为如果您需要选择更大范围的元素（例如 1-4），那么这样会导致更长的声明。
我已经使用 nth-of-type 多年（和 nth-child）并且不知道您可以使用它两次来获得交叉点。另外：伟大的艺术品:)

【解决方案2】：

第二个孩子可以使用

li:nth-child(2){}

供第三个孩子使用

li:nth-child(3){}

【讨论】：

这很容易使用，但它只是复制粘贴的工作，所以我更喜欢使用更短的东西:) 还是谢谢你

【解决方案3】：

CSS 有一个 :nth-child 选择器就是为了这个。你可以这样做：

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

在here了解更多信息

【讨论】：

谢谢，例如如何同时选择第一个、第二个和第三个 li 标签？

【解决方案4】：

所有答案都是正确的。总结起来，您的代码如下所示：

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

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

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

【讨论】：

这很好用，但我发现比这更短的东西 :D 感谢@fcalderan 我有这个代码：` li:nth-child(n+1):nth-child(-n+ 3) { 边距右：50px; } `
这只会影响前三个元素，还是会影响第六个元素？ @NedimKurt