如何在<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;
}

Answer 1

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

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

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

Codepen演示

这些伪造类链的效果的视觉结果:

Answer 2

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

li:nth-child(2){}

供第三个孩子使用

li:nth-child(3){}