答案：nth-child按位置选择不区分类型，nth-of-type按同类标签计数；前者适用于视觉顺序选中，后者适合类型过滤，两者可结合类名实现复杂样式控制。
在CSS中，nth-child 和 nth-of-type 是两个强大的伪类选择器，用于精确控制子元素的样式。虽然它们看起来相似，但作用机制不同。理解它们的区别并学会组合使用，能让你更灵活地处理复杂的DOM结构。
1. nth-child 与 nth-of-type 的区别
nth-child(n)：匹配父元素下的第n个子元素，**不区分类型**。只要位置符合，不管该子元素是什么标签。
nth-of-type(n)：匹配父元素下第n个指定类型的子元素，**只计算同类标签**。
例如：- div:nth-child(2) → 选中父元素中第2个子元素，且它必须是 div
- div:nth-of-type(2) → 选中父元素中第2个 div 元素（跳过其他标签）
2. 组合使用场景与技巧
虽然不能直接“组合”写成 nth-child-of-type，但可以通过嵌套逻辑实现复杂选择。
立即学习“前端免费学习笔记（深入）”；
<article> <p>段落1</p> <div class="box">盒子1</div> <p>段落2</p> <div class="box">盒子2</div> <p>段落3</p> <div class="box">盒子3</div> </article>目标：选中第2个 .box 元素
- .box:nth-of-type(2) → 正确：选中第二个 div.box（因为它是第2个 div 类型）
- .box:nth-child(4) → 也可行：因为它确实是第4个子元素
p:nth-of-type(odd) {
background: #eef;
}
div.box:nth-of-type(even) {
background: #fee;
}
3. 高级用法：公式与关键词
两者都支持公式 an + b 和关键词（odd, even）。
常见模式：- tr:nth-child(2n+1) → 选中奇数行（等同于 odd）
- li:nth-of-type(3n) → 每第3个 li 元素
- p:nth-of-type(1) → 第一个 p 标签（比 :first-of-type 更灵活）
- 当兄弟元素类型混杂时，优先用 nth-of-type
- 需要按视觉顺序（位置）选中时，用 nth-child
- 配合类名使用，如 .item:nth-child(5n) 实现网格中的每5项特殊样式
4. 注意事项与兼容性
两者均支持IE9+，现代浏览器无兼容问题。
- 索引从1开始，不是0
- 伪类对大小写敏感（HTML标签不区分，但自定义元素可能）
- 不要混淆 nth-child 和 nth-last-child（倒序）
基本上就这些。掌握 nth-child 与 nth-of-type 的核心差异，并根据DOM结构选择合适的方式，就能轻松应对大多数复杂样式需求。关键是理解“位置”与“类型”的区别。
