:nth-child(n) 是CSS中按子元素位置选中并设置样式的伪类选择器，适用于列表、表格等规律性样式控制；支持数字、关键字（odd/even）和an+b公式写法，如:nth-child(2)选第二个子元素，:nth-child(odd)选奇数项，:nth-child(3n+1)从第一项起每三项选一个，:nth-child(-n+3)选前三个；常用于隔行变色（tr:nth-child(even){background:#e6f7ff}）或周期性样式（li:nth-child(4n+1){border-left:3px solid #007acc}）；注意其计算包含所有同级子元素，不分标签类型，若需按标签类型计数应使用:nth-of-type(n)。
在CSS中，:nth-child(n) 是一个非常实用的伪类选择器，它可以根据元素在其父容器中的位置来选中特定的子元素，并为其设置样式。这个选择器特别适合用于规律性地为列表、表格行或网格项等批量添加样式，比如隔行变色、每三列加边距等。
基本语法与使用方式
:nth-child(n) 的括号中可以填入数字、关键字或公式，用来匹配对应位置的子元素。其父元素下的所有同级子元素都会被计入顺序，不论标签类型。
常见写法包括：- :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...）
- :nth-child(-n+3)：选中前3个元素
实现隔行变色效果
这是 :nth-child 最常见的应用场景之一，常用于表格或列表中提升可读性。
例如，让表格奇数行背景为浅灰色：tr:nth-child(odd) {
background-color: #f2f2f2;
}或者让偶数行有不同颜色：tr:nth-child(even) {
background-color: #e6f7ff;
}按周期规律设置样式
当你需要每几个元素应用一次样式时，可以用 an+b 的公式形式。
立即学习“前端免费学习笔记（深入）”；
比如，每4个列表项中第一个加边框：li:nth-child(4n+1) {
border-left: 3px solid #007acc;
padding-left: 10px;
}又如，只对前5个元素生效：div.item:nth-child(-n+5) {
opacity: 1;
}注意事项与技巧
使用 :nth-child 时要注意它基于父元素下所有子元素的顺序，不区分标签类型。如果父元素中混有不同类型标签（如 div、p、span），计算顺序仍会连续。
若需仅根据同类标签计数，应使用 :nth-of-type(n)。举个例子：/* 选中父元素中第2个 div 子元素 */ div:nth-child(2) <p>/<em> 选中父元素中第2个 div 类型的元素（跳过其他标签） </em>/ div:nth-of-type(2)
基本上就这些。掌握 :nth-child(n) 能让你更高效地控制页面布局样式，无需额外类名或JavaScript干预，就能实现灵活美观的视觉节奏。
