CSS奇偶子

在HTML文档中，经常需要交替地设置相邻元素的样式。例如，您可能希望通过更改单行表格行的颜色来增加可读性。在CSS中，您可以使用 :nth-child 伪类来实现奇偶行样式。

基本语法

nth-child 伪类在CSS中用于选择一组元素中的一个或几个子元素。以下是其中的例子：

/* 选择偶数行 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选择奇数行 */
tr:nth-child(odd) {
  background-color: #ffffff;
}

在上面的例子中，tr:nth-child(even) 选择偶数行，tr:nth-child(odd) 选择奇数行。您还可以指定要从第几行开始选择元素，例如 tr:nth-child(3n+1) 将选择每三行的第一行。

高级用法

除了选择奇偶行，您还可以使用 :nth-child 伪类来选择一组元素中的其他子元素。例如，以下代码将选择前三个 div 元素：

div:nth-child(-n+3) {
  color: red;
}

-n+3 表示选择第三个元素及其之前的元素。您还可以使用其他组合来选择元素。例如，以下代码将选择第2和第7个 p 元素：

p:nth-child(2n+7),
p:nth-child(7n+2) {
  color: blue;
}

请注意，nth-child 伪类选取的是在父元素中所有子元素的位置，而不是特定的元素类型。例如，以下情况将选择所有的子元素：

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

总结

使用 :nth-child 伪类，您可以轻松选择一组元素中的奇偶子元素或其他指定的子元素。此外，您还可以使用不同的组合来选择特定的元素。