如何在<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 Demo

这些伪造类链的影响的视觉结果：

Answer 2

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

li:nth-child(2){}

和第三个孩子使用

li:nth-child(3){}

Answer 3

所有答案都是正确的。总结一下，你的代码看起来像是：

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

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

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

Answer 4

CSS只有一个SELECT COUNT(*), s1.item_id FROM score s1 WHERE score.succeeded = 't' AND s1.user_id = XX AND NOT EXISTS (select 1 from score s2 where s2.user_id = s1.user_id and s2.item_id = s1.item_id and s2.succeeded = 'f' and s2.created_at > s1.created_at) GROUP BY s1.item_id 选择器。你可以这样做：

:nth-child

在here

了解详情