nth-child按所有子元素顺序计数，nth-of-type按同类型元素计数；两者可组合使用实现精准选择，如p:nth-child(even):nth-of-type(odd)选偶数位且为第奇数个p的元素。
在CSS中，nth-child 和 nth-of-type 都用于选择特定位置的子元素，但它们的计算方式不同。理解两者的区别并合理结合使用，能帮助我们更精准地定位目标元素。
nth-child 与 nth-of-type 的核心区别
nth-child(n) 按父元素下的所有子元素顺序计数，只看它是第几个孩子，不区分类型。
nth-of-type(n) 则按同类型的元素（如都是 div 或 p）在父元素中的顺序计数。
例如：
立即学习“前端免费学习笔记（深入）”；
<div> <p>段落1</p> <div>div1</div> <p>段落2</p> <div>div2</div> <p>段落3</p> </div>
-
p:nth-child(1)：选中第一个p，因为它是第一个子元素。 -
p:nth-child(3)：选中第二个p，因为它在所有子元素中排第3。 -
p:nth-of-type(3)：选中第三个p，即最后一个段落，按 p 标签类型单独计数。
结合应用实现精准控制
虽然不能直接“合并”两个伪类成一个选择器逻辑运算，但可以通过组合使用它们来缩小选中范围。
比如，你想选中“既是第偶数个子元素，又是第奇数个 p 元素”的段落：
p:nth-child(even):nth-of-type(odd) {
color: blue;
}
这条规则表示：
- 必须是
p标签； - 在所有子元素中排偶数位（第2、4、6…个孩子）；
- 同时是第1、3、5…个 p 类型元素。
实际场景中，这可能匹配到第2个孩子是 p 且是第一个 p 元素的情况（需具体结构判断）。
实用技巧与注意事项
使用这类组合时，注意以下几点：
- 多个伪类连用相当于“与”关系，必须同时满足；
- 结构变化会直接影响选择结果，建议结合浏览器开发者工具调试；
- 对于复杂布局，可考虑添加类名辅助选择，避免过度依赖伪类导致维护困难；
- 支持度良好，现代浏览器均支持 nth-child 与 nth-of-type。
常见应用场景示例
表格中隔行变色，但跳过标题行：
tr:nth-of-type(n+2):nth-child(odd) {
background: #f0f0f0;
}
从第二行开始（跳过表头），对奇数行着色。
图文混排中，选中前三个图片的奇数项：
img:nth-of-type(-n+3):nth-child(odd) {
border: 2px solid gold;
}
基本上就这些。掌握两者差异，灵活搭配，就能在不修改HTML的情况下实现高度精确的选择。 
