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