CSS | :nth-child() 选择器

简介

在CSS中，:nth-child()选择器可以用来选择一组元素中的某一个或某几个特定位置的元素。它的语法如下：

:nth-child(an)
:nth-child(an+b)
:nth-child(an+b)

其中，an表示周期，b表示偏移量，两者相加就能得到要选择的元素的位置。

周期

an表示周期，它可以是一个整数，也可以是一个公式，可以是下列的任意一个值：

| 值 | 描述 | | - | - | | odd | 奇数 | | even | 偶数 | | n | 所有整数。 | | 2n | 所有偶数。 | | 2n+1 | 所有奇数。 | | 3n | 3的倍数。 | | 3n+1 | 3的倍数加1。 | | 3n+2 | 3的倍数加2。 |

偏移量

b表示偏移量，它可以是一个整数或者是一个公式。其中正整数表示从前往后偏移，负整数表示从后往前偏移，偏移量不能为0。

示例

下面通过一些示例来介绍:nth-child()选择器的用法。

如下代码：

<ul>
  <li>小明</li>
  <li>小红</li>
  <li>小刚</li>
  <li>小李</li>
  <li>小张</li>
  <li>小美</li>
</ul>

1. 选择第一个元素：

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

2. 选择第二个元素：

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

3. 选择倒数第二个元素：

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

4. 选择偶数元素：

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

5. 选择3的倍数：

li:nth-child(3n) {
  color: pink;
}

总结

:nth-child()选择器是CSS中一种简单实用的选择器，通过它可以快速定位到想要的元素。在实际开发中，可以通过它来控制元素的样式，实现更加精细化的页面布局。