如何在CSS中使用:nth-child(n)选择器_规律性子元素样式应用

:nth-child(n) 可按位置选中子元素，支持数字、odd/even 关键字及 an+b 公式；常用于隔行变色 tr:nth-child(odd) 背景色、网格布局 .card:nth-child(4n+1) 清除外边距、或限定范围如:nth-child(n+3) 从第3项起生效，减少 class 使用，提升样式效率。

在CSS中，:nth-child(n) 是一个非常实用的伪类选择器，用于选中父元素下的第 n 个子元素，并为其应用特定样式。它特别适合对规律性排列的子元素进行样式控制，比如隔行变色、每三列加边距等。

基本语法与常见用法

:nth-child(n) 的括号中可以填入数字、关键字或公式（an + b），具体如下：

• :nth-child(2)：选中第2个子元素
• :nth-child(odd)：选中所有奇数位置的子元素（1, 3, 5…）
• :nth-child(even)：选中所有偶数位置的子元素（2, 4, 6…）
• :nth-child(3n)：每第3个元素被选中（3, 6, 9…）
• :nth-child(3n+1)：从第1个开始，每隔3个选一次（1, 4, 7…）

实现隔行变色效果

表格或列表中常用奇偶行不同背景色来提升可读性：

tr:nth-child(odd) {
background-color: #f9f9f9;
}
tr:nth-child(even) {
background-color: #eee;
}

这样就能轻松实现斑马条纹效果，无需额外添加 class。

立即学习“前端免费学习笔记（深入）”；

网格布局中的列样式控制

在多列布局中，比如每行显示4个商品卡片，若想让每行第一个元素左侧无边距，可以这样写：

.card {
float: left;
margin-left: 10px;
}
.card:nth-child(4n+1) {
margin-left: 0;
}

这里 4n+1 表示第1、5、9…个元素，即每一行的首项，清除其左外边距，避免换行错位。

排除特定元素或反向选择

有时需要跳过前几个元素，例如只对从第3个开始的项目应用样式：

.item:nth-child(n+3) {
color: red;
}

这会从第3个 .item 元素开始，之后所有都匹配。也可以结合负值使用：

.item:nth-child(-n+3) {
font-weight: bold;
}

仅对前3个元素加粗。

基本上就这些。掌握 :nth-child(n) 的模式写法，能大幅减少HTML中冗余的 class，让样式更简洁、维护更方便。关键是理解 an+b 的数学逻辑，并结合实际结构测试效果。不复杂但容易忽略细节。