答案：:nth-child通过位置匹配子元素，支持数字、关键词和公式，适用于表格、列表等结构。示例：tr:nth-child(odd)设奇数行背景色，li:nth-child(-n+3)使前3项文字变红，结合标签或类名可精确控制样式。
使用 :nth-child 可以方便地为父元素中的特定子元素设置样式，而无需添加额外的类名或 ID。它通过子元素的位置来匹配目标元素，非常适用于表格、列表等重复结构。
基本语法与常见用法
:nth-child(n) 选择父元素下的第 n 个子元素，n 可以是数字、关键词或公式（如 2n+1）。
常用形式包括：- :nth-child(3) —— 选中第 3 个子元素
- :nth-child(2n) 或 :nth-child(even) —— 选中偶数位置的子元素
- :nth-child(2n+1) 或 :nth-child(odd) —— 选中奇数位置的子元素
- :nth-child(n+4) —— 从第 4 个开始的所有子元素
- :nth-child(-n+3) —— 前 3 个子元素
选择特定模式的子元素
你可以用数学表达式精准控制要选中的元素。
例如：- :nth-child(3n) —— 每第 3 个元素（3、6、9…）
- :nth-child(4n+1) —— 第 1、5、9、13… 个元素
- :nth-child(5n-2) —— 匹配满足公式的项（如第 3、8、13…）
这种写法在实现网格布局、斑马条纹或周期性样式时特别有用。
立即学习“前端免费学习笔记（深入）”；
注意点与实际应用示例
:nth-child 是基于父容器内的所有子元素进行计数的，不会跳过非目标标签。比如你想对 ul 中的 li 元素使用 nth-child，但如果有其他元素（如 div），也会计入总数。
示例：给表格奇数行添加背景色
tr:nth-child(odd) {
background-color: #f2f2f2;
}
只对前 3 个列表项加红色文字：
li:nth-child(-n+3) {
color: red;
}
与其他伪类配合使用
如果只想针对某一类标签应用 nth-child，可以结合标签名或类名。
例如：- li:nth-child(even) —— 只对 li 标签中的偶数项生效
- .item:nth-child(3n) —— 选中 class 为 item 的元素中每第 3 个
这样能更精确地控制样式作用范围。
基本上就这些，掌握好公式和索引逻辑，就能灵活控制任意位置的子元素样式。
