博客


&:nth-child(n)

，其中 n 是一个表示位置的参数。 位置是

从 1 开始计数

的整数值。 这意味着第一个元素的位置是 1，第二个元素的位置是 2，以此类推。

使用 &::nth-child 可以根据元素在其父级元素中的位置应用样式。 例如，你可以使用它来选择列表中的奇数或偶数行，或者选择特定位置上的元素。

以下是一些示例：

选择偶数行的元素并应用样式：

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

选择奇数行的元素并应用样式：

li:nth-child(odd) {
  background-color: #f2f2f2;
}

选择列表中第三个元素并应用样式：

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

选择列表中倒数第二个元素并应用样式：

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

&::nth-child 还支持使用公式来选择元素，例如 2n+1 表示选择奇数位置的元素，3n 表示选择位置是 3 的倍数的元素等等。 这使得 &::nth-child 在选择灵活位置上的元素时非常有用。