有用的 :nth-child 食谱

当我遇到 :nth-child 或 :nth-of-type 的完美用法时，我有点兴奋（了解两者之间的区别）。您对它们的理解越深，您获得的 CSS 极客体验就越多！

在这些简单的“食谱”（实际上是表达式）中，我将随意使用一个扁平的列表项列表和随机选择的数字。但应该很清楚如何更改它们以获得类似的选择。

仅选择第五个元素

li:nth-child(5) {
    color: green;   
}

要选择第一个元素，可以使用 :first-child，或者我相信您可以猜到如何更改上面的代码来实现这一点。

选择除了前五个以外的所有元素

li:nth-child(n+6) {
    color: green;   
}

如果这里有超过 10 个元素，它将选择所有超过 5 的元素。

仅选择前五个

li:nth-child(-n+5) {
    color: green;   
}

选择每个第四个，从第一个开始

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

仅选择奇数或偶数

li:nth-child(odd) {
    color: green;   
}

li:nth-child(even) {
    color: green;   
}

选择最后一个元素

li:last-child {
    color: green;
}

选择第 10 个，因为这里有 10 个元素，但如果有 8 个元素，它将选择第 8 个，或者如果有 1290 个元素，它将选择第 1290 个。

选择倒数第二个元素

li:nth-last-child(2) {
    color: green;
}

选择第 9 个，因为这里有 10 个元素，但如果有 30 个元素，它将选择第 29 个。

想玩吗？

尝试测试工具。

浏览器支持

有趣的是，:first-child 受 IE 7 支持，但直到 IE 9 才支持其余内容。除了 IE 之外，没有太多浏览器支持问题，如果您担心 IE，请使用 Selectivizr。如果您对浏览器支持感兴趣或很重要，请务必查看 何时可以使用……，它可以很好地跟踪这些信息。