:first-of-type按类型选首个同类型元素，:nth-child(n)按位置选第n个子元素；二者连用表示“与”关系，可精准匹配特定条件的元素，如p:first-of-type:nth-child(2)。
在CSS中，:first-of-type 和 :nth-child() 都是结构伪类，用于根据元素在父容器中的位置选择特定元素。虽然它们功能相似，但匹配逻辑不同。理解它们的差异并合理结合使用，能更精准地控制样式。
理解 :first-of-type 的作用
:first-of-type 选择器会选中其父元素下同类型（即相同标签名）的第一个元素。例如，如果有多个 p 标签，它会选择第一个 p。
示例：
p:first-of-type {
color: red;
}
这会将页面中每个父容器内第一个 p 元素文字变为红色，不管前面是否有其他类型的元素（如 div 或 h2）。
立即学习“前端免费学习笔记（深入）”；
理解 :nth-child(n) 的定位方式
:nth-child(n) 是基于子元素在父容器中的位置序号来选择的，不关心元素类型。比如 :nth-child(1) 永远选择第一个子元素，无论它是 div、p 还是 span。
示例：
div:nth-child(1) {
background: yellow;
}
只有当第一个子元素是 div 时才会生效。
结合使用 :first-of-type 和 :nth-child
有时需要更精确的选择逻辑。虽然不能直接“组合”两个伪类实现“或”关系，但可以利用它们的特性达成类似效果。
常见使用场景：
- 确保某个类型的元素在特定位置才被选中
- 排除某些布局干扰
例如：你想选中父容器中第一个 p 元素，并且它恰好是第2个子节点：
p:first-of-type:nth-child(2) {
font-weight: bold;
}
这个选择器表示：既是同类型中的第一个 p，又位于父元素的第二个子节点位置。只有同时满足这两个条件的元素才会被选中。
另一个实际例子：在一个文章内容区中，希望跳过标题后的第一个段落（通常是引言），从第二个段落开始添加首行缩进：
p:nth-child(n+3):first-of-type {
text-indent: 2em;
}
这里虽然语法上可行，但更清晰的方式是使用 :nth-of-type(2) 来选中第二个 p。说明：合理使用 :first-of-type 和 :nth-child() 能提升选择精度，但要避免过度复杂化。
实用建议与注意事项
在实际开发中注意以下几点：
- :first-of-type 关注元素类型，忽略兄弟节点类型
- :nth-child() 只看位置，不看标签名
- 多个伪类连写表示“与”关系（都必须满足）
- 若想实现“或”逻辑，需分开写规则
例如，给第一个 div 或第一个 p 加边框：
div:nth-child(1),
p:nth-child(1) {
border: 1px solid #ccc;
}
基本上就这些。掌握这两个伪类的区别和联合用法，能让你在处理复杂DOM结构时更得心应手。关键在于理解它们各自的匹配逻辑，再根据实际结构灵活搭配。
