CSS :nth-child 伪类用法详解
在网页样式开发中，我们经常需要对一组同类元素中的第n个元素设置特殊样式，比如列表中的某一行高亮、表格的奇偶行不同背景等。CSS提供了:nth-child伪类来实现这类需求，无需额外添加类名即可精准选中目标元素。本文将详细介绍:nth-child的语法、参数规则以及实际使用示例。
一、:nth-child 伪类基础语法
:nth-child是CSS3新增的结构化伪类选择器，用于匹配符合规则的父元素下的第n个子元素，语法格式如下：
选择器:nth-child(an+b) {
属性: 值;
}其中an+b是核心的参数表达式，a和b都是整数，n是一个从0开始递增的计数器（n的取值为0,1,2,3...）。表达式的计算逻辑是：先取n的每个取值，计算an+b的结果，得到的结果就是需要选中的子元素的序号（序号从1开始），如果父元素下存在对应序号的子元素，且该子元素符合前面的选择器规则，就会应用设置的样式。
二、常见参数用法说明
根据参数an+b的不同取值，可以实现多种选择效果，以下是常用的几种场景：
选择单个指定序号的子元素：直接传入具体的数字，比如
:nth-child(3)，表示选中父元素下的第3个子元素。选择偶数序号的子元素：使用
:nth-child(2n)或者简写:nth-child(even)，n取0时结果为0（无对应元素），n取1时结果为2，n取2时结果为4，以此类推选中所有偶数位子元素。选择奇数序号的子元素：使用
:nth-child(2n+1)或者简写:nth-child(odd)，n取0时结果为1，n取1时结果为3，n取2时结果为5，以此类推选中所有奇数位子元素。选择前m个子元素：使用
:nth-child(-n+m)，比如:nth-child(-n+3)，n取0时结果为3，n取1时结果为2，n取2时结果为1，n取3时结果为0（无对应元素），最终选中前3个子元素。选择间隔为a的一组子元素：比如
:nth-child(3n+1)，n取0时结果为1，n取1时结果为4，n取2时结果为7，以此类推选中序号为1、4、7...的子元素。
三、实际使用示例
示例1：列表奇偶行不同背景
下面的代码实现一个无序列表，奇数行背景为浅灰色，偶数行背景为白色：
<ul class="list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul>
对应的CSS样式如下：
.list li {
padding: 10px;
margin: 2px 0;
}
.list li:nth-child(odd) {
background-color: #f5f5f5;
}
.list li:nth-child(even) {
background-color: #ffffff;
}示例2：选中第3个子元素设置特殊样式
下面的代码实现一个导航栏，让第3个导航项文字显示为红色：
<nav class="nav"> <a href="https://www.ipipp.com">首页</a> <a href="https://www.ipipp.com">产品</a> <a href="https://www.ipipp.com">服务</a> <a href="https://www.ipipp.com">关于我们</a> </nav>
对应的CSS样式如下：
.nav a {
margin: 0 10px;
text-decoration: none;
color: #333;
}
.nav a:nth-child(3) {
color: #ff0000;
font-weight: bold;
}示例3：选中前2个和从每3个开始的元素
下面的代码实现一个图片网格，前2个图片放大显示，之后每3个图片中的第1个也放大显示：
.gallery img:nth-child(-n+2) {
width: 200px;
height: 200px;
}
.gallery img:nth-child(3n+1):not(:nth-child(-n+2)) {
width: 200px;
height: 200px;
}四、注意事项
使用:nth-child时需要注意以下几点：
:nth-child计算的是父元素下所有子元素的序号，不区分元素类型。如果需要只选择同类型元素中的第n个，应该使用:nth-of-type伪类。比如div p:nth-child(2)会选中div下第2个子元素且是p标签的元素，而如果div的第2个子元素是<span>，则不会选中；div p:nth-of-type(2)则会选中div下第2个p标签元素，不受其他类型子元素影响。表达式中的n只能写在前面，不能写成
b+an的形式，否则语法无效。n的取值从0开始，但子元素序号从1开始，当计算结果为0或负数时，不会匹配任何元素，不会报错。
:nth-child的兼容性较好，支持IE9及以上版本的浏览器，如果需要兼容更低版本的IE，可以考虑使用JavaScript或者额外添加类名的方式实现类似效果。
五、总结
:nth-child伪类是CSS中非常实用的结构化选择器，通过简单的an+b表达式就能实现灵活的子元素选择，大幅减少了额外添加类名的工作量，让样式代码更简洁。开发中可以根据实际需求选择合适的参数表达式，结合其他CSS选择器实现更复杂的样式逻辑。