:first-of-type选择同类型子元素中的第一个，如p:first-of-type选中首个p元素，即使前面有其他标签；与:first-child不同，后者要求必须是父元素的第一个子节点。
:first-of-type 是 CSS 中的一个结构伪类，用于选择父元素中具有相同标签类型的第一个子元素。它不关心该元素在父容器中的总顺序，只关注其元素类型（即标签名）是否是同类型中的第一个。
理解 :first-of-type 的选择逻辑
假设你有一段 HTML 内容如下：
如果你使用以下 CSS：
p:first-of-type {color: red;
}
那么第一个 元素
即使前面有其他类型的元素，只要它是该类型中最早出现的，就会被匹配。例如：
上面这段代码中，p:first-of-type 依然能选中第一个 ，因为它是在所有 p 元素中排第一的，即使它不是 div 的第一个子元素。
与 :first-child 的区别
很多人容易混淆 :first-of-type 和 :first-child。它们的关键区别在于：
- :first-child 要求元素必须是父元素的第一个子元素，不管类型
- :first-of-type 只要求是某一类型中的第一个，不要求整体位置
继续以上面的例子说明：
div > p:first-child { color: blue; }这个规则不会生效，因为 p 不是 div 的第一个子元素（span 才是）。而用 :first-of-type 就可以成功选中。
实际应用场景
:first-of-type 在以下场景中非常实用：
- 为文章中第一个段落设置首行缩进或加大字号
- 在列表中忽略标题或图片，仅对第一个同类内容元素加样式
- 处理动态内容时，避免依赖固定结构
比如你想让一篇文章中第一个段落字体更大：
article p:first-of-type {font-size: 1.2em;
font-weight: bold;
}
这样无论前面有没有 h1、img 或其它标签，只要是第一个 p，就能被正确选中。
注意事项与兼容性
使用 :first-of-type 时需注意几点：
- 它基于元素类型，所以 div:first-of-type 会选择第一个 div 类型的子元素
- 不支持 IE8 及更早版本，现代浏览器均支持良好
- 可与其他选择器组合，如 .class:first-of-type 或 p:nth-of-type(1)（功能类似）
基本上就这些。掌握 :first-of-type 能让你更灵活地控制文档中特定类型首个元素的样式，而不必依赖额外的 class 或 JS 操作。
