:nth-child 伪类通过 an+b 公式按位置选中子元素，n≥0 且从1开始计数，支持 odd、even 关键词与数学表达式，常用于隔行变色或规律布局，如 2n 选偶数项、3n+1 每三项首项，需注意不区分元素类型且负值无效。
在css中，:nth-child 是一个非常实用的伪类选择器，可以让你根据元素在父容器中的位置来选中特定子元素。它支持关键词（如 odd、even）和公式 an + b 的形式进行灵活选择。
基本语法
:nth-child(an + b) 中：
- a 是循环的步长（系数）
- n 是从0开始的计数变量（不能为负数）
- b 是偏移量（起始位置）
这个公式会匹配满足位置序号等于 an + b 的元素（序号从1开始）。
常见用法示例
以下是一些常用写法及其含义：
立即学习“前端免费学习笔记（深入）”；
- :nth-child(2n) → 选择第2、4、6、8…个元素（偶数项）
- :nth-child(2n+1) → 选择第1、3、5、7…个元素（奇数项）
- :nth-child(n+4) → 从第4个开始，之后所有元素
- :nth-child(3n+1) → 选择第1、4、7、10…个元素（每3个中的第一个）
- :nth-child(1) → 只选第一个子元素（等同于 :first-child）
- :nth-child(even) → 偶数位置元素
- :nth-child(odd) → 奇数位置元素
注意事项
使用时要注意几点：
- 索引是从 1 开始 的，不是从0
- 只看兄弟元素的顺序，不区分类型（除非用 :nth-of-type）
- 如果公式结果小于1，则不会匹配任何元素（如
-n+0） - n 是整数且 ≥ 0，例如当 a=3, b=1 时：
- n=0 → 3×0+1 = 1 → 第1个
- n=1 → 3×1+1 = 4 → 第4个
- n=2 → 3×2+1 = 7 → 第7个
实际应用场景
常用于表格隔行变色或网格布局中：
tr:nth-child(even) { background-color: #f2f2f2; } li:nth-child(3n+1) { color: red; }
这样可以让视觉呈现更有规律。
基本上就这些，掌握 an + b 的计算逻辑后，就能精准控制要选中的子元素位置了。不复杂但容易忽略细节。