:first-of-type 选择器用于选中父元素内同类型中的首个元素，如 p:first-of-type 为首个段落设置缩进、字体大小和颜色；h2:first-of-type 美化首个标题；li:first-of-type 突出列表首项；即使非父元素首个子元素，只要其在同类标签中排第一即生效，适用于无需额外 class 的首项样式定制。
使用 :first-of-type 选择器可以精准地为某一类型元素中的第一个子元素设置样式，常用于调整首行或首个同类元素的外观。这个伪类会匹配父元素下同类型元素中的第一个。
基本语法与作用
:first-of-type 会选择父元素中其类型的第一个实例。比如，如果页面中有多个 <p> 段落，它会选中第一个 <p> 元素。
示例：让文章中第一个段落缩进并加大字体
p:first-of-type { text-indent: 2em; font-size: 1.1em; color: #333; }这样只会对第一个 <p> 生效，后面的段落不受影响。
立即学习“前端免费学习笔记（深入）”；
应用于首行标题或列表
如果你希望文章的第一个标题（如 <h2>）有特殊样式，也可以用此选择器：
在包含多个 <h2> 的内容区域中，只有第一个会被应用该样式，适合用于文章导语后的首个章节标题美化。
对于列表，比如想突出第一个列表项：
li:first-of-type { font-weight: bold; color: #005a9c; }注意事项与常见问题
这个选择器依赖于元素类型和在父容器中的位置。以下几点要注意：
- 如果第一个子元素不是目标类型，:first-of-type 仍会选中该类型中排第一的元素，哪怕它不是整体第一个子元素
- 确保没有其他同类型元素意外出现在前面（比如隐藏的元素或脚本生成的内容）
- 它不区分类名或属性，只看标签类型
例如，下面这段结构中：
<div> <span>辅助说明</span> <p>这是第一个段落</p> <p>这是第二个段落</p> </div>此时 p:first-of-type 依然能选中第一个 <p>，尽管它不是 <div> 的第一个子元素。
基本上就这些。合理使用 :first-of-type 能让你的首行或首项样式更灵活，又无需额外添加 class。
