:first-of-type用于选中父元素下同类标签的第一个元素。1. 可选中指定类型首个标签，如p:first-of-type将首个p元素文字变红；2. 在混合标签中精准定位，如div内有h2和p，p:first-of-type仅加粗首个p；3. 按标签类型区分，非所有子元素首个，若需选首个子元素应使用:first-child；4. 实际应用如去除首段上边距，p:first-of-type设置margin-top为0。关键在于理解其选择的是同类型首个而非整体首个元素。
在 CSS 中，:first-of-type 伪类用于选中其父元素下同类标签中的第一个元素。如果你想“选中首行元素”，需要明确你指的是什么类型的“首行”元素。下面根据不同情况说明如何使用 :first-of-type 来选中首个元素。
1. 选中某一类型标签的第一个元素
如果你有一组相同标签（如多个 p 或 div），可以使用 :first-of-type 选中其中第一个。
p:first-of-type {
color: red;
}
这段代码会让页面中第一个 元素文字变红，前提是它在其父容器中是第一个 p 类型的子元素。
2. 在混合标签中精准选中首个同类元素
当父容器内包含多种标签时，:first-of-type 依然能正确识别对应类型的第一个。
立即学习“前端免费学习笔记（深入）”；
例如 HTML 结构：
使用以下 CSS：
p:first-of-type {
font-weight: bold;
}
只有“第一段”会加粗，因为它是所有 p 标签中的第一个，尽管前面有 h2。
3. 注意：first-of-type 是按标签类型区分的
:first-of-type 不是选中父元素的第一个子元素，而是选中第一个出现的**特定类型**的元素。比如：
-
div:first-of-type选中第一个div -
span:first-of-type选中第一个span
如果想选中父元素的第一个子元素，不管类型，应该用 :first-child。
4. 实际应用场景
常用于跳过第一个元素的某些样式，比如去掉第一个段落的上边距：
p {
margin-top: 20px;
}
p:first-of-type {
margin-top: 0;
}
基本上就这些。关键是理解 :first-of-type 是“同类型中的第一个”，而不是“所有子元素中的第一个”。根据你的 HTML 结构合理使用，就能准确选中目标“首行”元素。
