&: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 在选择灵活位置上的元素时非常有用。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐