CSS nth-child选择器 – 匹配第2、第5、第8个元素

在本文中，我们将介绍CSS中的nth-child选择器，并详细解释如何使用它来匹配第2、第5、第8个元素等。

阅读更多：CSS 教程

nth-child选择器简介

nth-child选择器是CSS中的一种伪类选择器，它根据元素在其父元素中的位置来选择特定的元素。这个选择器的语法如下：

:nth-child(n)

其中，”n”是一个表示位置的参数。nth-child选择器会匹配父元素中第n个子元素，而不论它是什么元素类型。

匹配第2、第5、第8个元素

有时候，我们希望样式仅应用于特定位置的元素，比如第2、第5、第8个元素。使用:nth-child()选择器可以轻松实现这个需求。

匹配第2个元素

要匹配第2个元素，我们可以使用nth-child(2)选择器。例如，下面的CSS规则将样式应用于文档中每个列表的第2个列表项：

li:nth-child(2) {
  background-color: yellow;
}

这将使第2个列表项的背景色变为黄色。

匹配第5个元素

要匹配第5个元素，我们可以使用nth-child(5)选择器。例如，下面的CSS规则将样式应用于文档中每个表格的第5行：

tr:nth-child(5) {
  background-color: cyan;
}

这将使第5行的背景色变为青色。

匹配第8个元素

要匹配第8个元素，我们可以使用nth-child(8)选择器。例如，下面的CSS规则将样式应用于文档中每个无序列表的第8个列表项：

ul li:nth-child(8) {
  color: red;
}

这将使每个无序列表的第8个列表项的文字颜色变为红色。

更复杂的选择器

nth-child选择器还可以与其他选择器组合使用，以匹配更复杂的元素结构。下面是一些示例：

匹配偶数行

要匹配偶数行，可以使用:nth-child(even)选择器。例如，下面的CSS规则将样式应用于文档中每个表格的偶数行：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

这将使所有偶数行的背景色变为淡灰色。

匹配奇数行

要匹配奇数行，可以使用:nth-child(odd)选择器。例如，下面的CSS规则将样式应用于文档中每个表格的奇数行：

tr:nth-child(odd) {
  background-color: #ddd;
}

这将使所有奇数行的背景色变为浅灰色。

使用公式匹配元素

还可以使用公式来匹配元素。例如，如果我们想匹配2的倍数位置的元素，可以使用:nth-child(2n)选择器。同样，如果我们想匹配3的倍数位置的元素，可以使用:nth-child(3n)选择器。例如，下面的CSS规则将样式应用于文档中每个有序列表的3的倍数位置的列表项：

ol li:nth-child(3n) {
  font-weight: bold;
}

这将使每个有序列表的3的倍数位置的列表项的字体加粗。

总结

通过使用:nth-child()选择器，我们可以轻松匹配文档中特定位置的元素。我们可以使用简单的参数来匹配第2、第5、第8个元素，也可以使用公式来匹配奇数行、偶数行等更复杂的元素结构。这种选择器为我们提供了更大的灵活性和控制力，让我们能够更精确地应用样式。

希望本文对你理解和使用CSS中的nth-child选择器有所帮助！