:first-of-type 选择父元素中同类型的首个子元素，如 p:first-of-type 选中第一个 p 标签，不受其他类型元素影响，常用于段落、列表等首项样式设置。
在CSS中，:first-of-type 伪类用于选择其父元素中具有相同标签类型的第一个子元素。它会忽略其他类型的兄弟元素，只关注指定的元素类型。
基本语法与作用
使用 :first-of-type 可以选中某一类型（如 p、div、li 等）在父容器中的第一个实例。它不依赖于该元素在所有子元素中的位置，只要它是该类型中出现的第一个即可。
例如：p:first-of-type {
color: red;
}
这段代码会让父元素中第一个 p 标签文字变为红色，即使前面有其他元素（如 div 或 h2），也不影响选择逻辑。
实际应用场景
这个选择器常用于对特定类型元素进行初始化样式设置，比如段落、列表项或标题。
立即学习“前端免费学习笔记（深入）”；
- 选择第一个段落并加粗：
p:first-of-type { font-weight: bold; } - 为第一个列表项添加背景：
li:first-of-type { background: #f0f0f0; } - 仅对第一个图片设置边距：
img:first-of-type { margin-top: 0; }
与其他选择器的区别
:first-of-type 和 :first-child 不同。前者只看元素类型，后者要求该元素必须是父元素下的第一个子节点。
<div> <h2>标题</h2> <p>第一段</p> <p>第二段</p> </div>
此时 p:first-of-type 能选中“第一段”，因为它是第一个 p 元素；但 p:first-child 无法匹配任何元素，因为 p 不是第一个子节点。
结合类或属性更精确控制
可以将 :first-of-type 与其他选择器组合，实现更精准的选择。
比如：.content p:first-of-type {
text-indent: 2em;
}
这表示只对 class 为 content 的容器内的第一个 p 元素设置首行缩进。
基本上就这些。掌握 :first-of-type 能帮助你在不添加额外类名的情况下，准确选中所需元素。关键是理解“类型”指的是标签类型，并且选择的是该类型中的首个实例。
