CSS3伪类选择器是CSS中用于选择处于特定状态元素的规则，不需要额外添加类名就能实现动态样式匹配，其中nth-child()是日常开发中使用频率极高的结构性伪类选择器，能够按照位置规则匹配元素子节点。
CSS3常用伪类选择器分类
CSS3的伪类选择器可以按照功能分为以下几类，不同类型对应不同的匹配场景：
1. 结构性伪类选择器
这类选择器基于元素在文档树中的位置进行匹配，常见的包括：
:first-child：匹配父元素下的第一个子元素:last-child：匹配父元素下的最后一个子元素:nth-child(n)：匹配父元素下第n个子元素，n可以是数字、关键词或公式:nth-last-child(n)：从最后一个子元素开始倒序匹配第n个子元素:only-child：匹配父元素下唯一的子元素
2. 状态伪类选择器
这类选择器匹配处于特定交互状态的元素，常见类型如下：
:hover：匹配鼠标悬停状态下的元素:focus：匹配获得焦点的表单元素或可交互元素:checked：匹配被选中的单选框或复选框:disabled：匹配被禁用的表单元素
3. 其他常用伪类选择器
:not(selector)：匹配不符合指定选择器的元素:empty：匹配没有任何子元素和文本内容的空元素:root：匹配文档的根元素，也就是html元素
nth-child()选择器使用详解
:nth-child(n)的核心是匹配父元素下第n个位置的子元素，这里的n取值规则非常灵活，支持多种写法：
参数取值规则
| 参数类型 | 示例 | 匹配规则 |
|---|---|---|
| 具体数字 | :nth-child(3) | 匹配父元素下第3个子元素 |
| 关键词even | :nth-child(even) | 匹配所有偶数位置的子元素 |
| 关键词odd | :nth-child(odd) | 匹配所有奇数位置的子元素 |
| 公式an+b | :nth-child(2n+1) | 匹配第1、3、5...奇数位置的子元素，n从0开始取值 |
实际使用示例
下面通过一个列表样式案例展示nth-child()的实际用法，实现奇偶行不同背景色的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>nth-child使用示例</title>
<style>
/* 匹配列表中的奇数项，设置浅灰色背景 */
li:nth-child(odd) {
background-color: #f5f5f5;
}
/* 匹配列表中的偶数项，设置白色背景 */
li:nth-child(even) {
background-color: #ffffff;
}
/* 匹配列表的第1个子元素，设置加粗样式 */
li:nth-child(1) {
font-weight: bold;
}
/* 匹配每3个元素中的第2个，也就是第2、5、8...项 */
li:nth-child(3n+2) {
color: #ff6600;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
</ul>
</body>
</html>注意事项
使用nth-child()时需要注意，它匹配的是父元素下所有子元素中的第n个，不管元素类型是否和选择器前指定的标签一致。如果需要匹配同类型元素中的第n个，可以使用:nth-of-type(n)选择器，比如p:nth-of-type(2)只会匹配父元素下第二个p标签，不会计算其他类型的子元素。
另外n的取值从1开始，而不是从0开始，当使用公式an+b时，n的初始值是0，计算结果为0或负数时不会匹配任何元素，实际匹配时只会取正整数结果对应的位置。
CSS3伪类选择器nth-child()前端样式修改时间：2026-06-07 02:38:44