介绍
在写CSS时，我们经常需要对页面中的元素进行选取操作。但是当页面中有很多相同或类似的元素时，如何选取其中的第几个元素呢？本文将介绍CSS中如何选取第几个元素。
基本语法
在CSS中，我们可以使用伪类来选取第几个元素。常用的伪类有:first-child、:last-child、:nth-child(n)等。其中，:nth-child(n)可以选取指定的第几个元素。:nth-child(n)的语法如下：
/* 选取第n个元素 */
:nth-child(n) {
/* 样式 */
}
/* 选取前n个元素 */
:nth-child(-n + n) {
/* 样式 */
}
/* 选取后n个元素 */
:nth-child(n + n) {
/* 样式 */
}
/* 选取从第n个元素开始后每个第m个元素 */
:nth-child(n + n):nth-child(m) {
/* 样式 */
}
其中，n、m为数字。下面我们分别介绍几个例子。
选取第一个元素
如果我们需要选取第一个元素，可以使用:first-child伪类。:first-child选取的是第一个子元素，如果不是第一个子元素，将不会被选中。如下面的例子：
/* 选取第一个p元素 */
p:first-child {
color: red;
}
上面的代码将选取页面中的第一个p元素，并把它的颜色设置为红色。
选取倒数第二个元素
如果我们需要选取倒数第二个元素，可以使用:nth-last-child(2)伪类。nth-last-child(n)是从后往前数的第n个子元素，如下面的例子：
/* 选取倒数第二个p元素 */
p:nth-last-child(2) {
color: red;
}
上面的代码将选取页面中的倒数第二个p元素，并把它的颜色设置为红色。
选取第3个元素
如果我们需要选取第3个元素，可以使用:nth-child(3)伪类。如下面的例子：
/* 选取第3个p元素 */
p:nth-child(3) {
color: red;
}
上面的代码将选取页面中的第3个p元素，并把它的颜色设置为红色。
选取前3个元素
如果我们需要选取前3个元素，可以使用:nth-child(-n + 3)伪类。如下面的例子：
/* 选取前3个p元素 */
p:nth-child(-n + 3) {
color: red;
}
上面的代码将选取页面中的前3个p元素，并把它们的颜色设置为红色。
选取后3个元素
如果我们需要选取后3个元素，可以使用:nth-child(n + 4)伪类。如下面的例子：
/* 选取后3个p元素 */
p:nth-child(n + 4) {
color: red;
}
上面的代码将选取页面中的后3个p元素，并把它们的颜色设置为红色。
选取从第3个元素开始后每个第2个元素
如果我们需要选取从第3个元素开始后每个第2个元素，可以使用:nth-child(n + 3):nth-child(2)伪类。如下面的例子：
/* 选取从第3个p元素开始后每个第2个p元素 */
p:nth-child(n + 3):nth-child(2) {
color: red;
}
上面的代码将选取页面中从第3个p元素开始后每个第2个p元素，并把它们的颜色设置为红色。
总结
CSS中我们可以使用伪类来选取第几个元素，常用的伪类有:first-child、:last-child、:nth-child(n)等。其中，:nth-child(n)可以选取指定的第几个元素。在实际开发中，我们可以根据需要灵活运用这些伪类来完成样式的设置。