: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 的数学逻辑，并结合实际结构测试效果。不复杂但容易忽略细节。
