:first-of-type 选择同类型子元素中的首个元素，如 p:first-of-type 匹配首个 p 标签，不一定是父元素的第一个子节点，与 :first-child 不同，后者要求必须是第一个子元素。
:first-of-type 是 CSS 中的一个结构伪类选择器，它的作用是选中父元素下同类型元素中的第一个子元素。
基本作用说明
这个选择器会匹配在父容器中具有相同标签名且为该类型首个出现的元素。它不关心元素在所有子元素中的顺序，只关注其元素类型的首次出现。例如，如果有多个 p 标签、div 标签混排，:first-of-type 会选择每个类型中第一个出现的那一个。
使用示例
假设有如下 HTML 结构：对应的 CSS：标题
第一段文字
第二段文字
Nextcloud Server下载Nextcloud服务器是一款免费且开源的服务器软件，它允许您将所有数据存储在您选择的服务器上。通过Nextcloud，您可以轻松访问和存储位于您信任的数据中心的数据，将数据在各种设备之间同步，并共享您的数据以进行协作。它提供了自托管文件同步和共享领域中最佳的安全性，并且可以通过数百个应用进行扩展。
立即学习“前端免费学习笔记（深入）”；
@@##@@ @@##@@第三段文字
p:first-of-type {
color: red;
}
img:first-of-type {
border: 3px solid blue;
}
结果：
- 第一个
p元素（“第一段文字”）会被设为红色，因为它是所有p标签中的第一个。 - 第一个
img元素会有一个蓝色边框。
与 :first-child 的区别
:first-of-type 更灵活，不要求目标元素是父元素的第一个子节点，而 :first-child 要求必须是第一个子元素。- 如果第一个子元素不是目标类型，:first-child 不会匹配，但 :first-of-type 仍可命中该类型第一个出现的元素。
- 比如上面例子中，
p不是第一个子元素（h2才是），所以p:first-child不会生效，但p:first-of-type可以。
