如何選擇第二和第三元素（li） <ul> 標簽（用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){}

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有一個:nth-child選擇器。 你可以這樣做：

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

在這里閱讀更多相關信息