:first-of-type 选择器用于选中父元素内同类型标签的第一个实例，常用于标题样式控制。例如 h2:first-of-type 可为页面首个 h2 添加特殊样式，如加大字号、颜色或下划线，后续 h2 不受影响。与 :first-child 不同，它不要求元素是父级的第一个子元素，只需是同类型中的第一个即可，因此更灵活。通过限定作用范围如 section h2:first-of-type，可实现每个章节内首个 h2 的独立样式化，适用于多模块布局。实际应用包括博客文章首标题美化、帮助文档每章首个 h3 设背景色等，避免手动添加 class，提升代码简洁性与语义性。
在CSS中，:first-of-type 是一个非常实用的伪类选择器，能够帮助我们精准控制页面中某一类型元素的首个实例。特别适用于标题样式控制，比如只对第一个 h2 或 h3 应用特殊样式，而不影响后续同类标题。
什么是 :first-of-type 选择器？
:first-of-type 会选择父元素内同类型标签中的第一个元素。例如，h2:first-of-type 会匹配文档或父容器中出现的第一个 h2 标签，无论它前面有没有其他类型的元素。
这与 :first-child 不同，后者要求该元素必须是其父元素的第一个子元素，限制更严格。
如何用于标题样式控制？
在文章或章节内容中，你可能希望第一个标题突出显示，比如加大字号、添加边距或颜色。使用 :first-of-type 可以轻松实现：
立即学习“前端免费学习笔记（深入）”；
h2:first-of-type {
font-size: 2em;
color: #333;
margin-top: 0;
text-decoration: underline;
}
这段样式会让页面中第一个 h2 标题有下划线，并调整字体大小和颜色，而之后的所有 h2 标题则不受影响，保持默认样式。
如果结构中有多个章节（如多个 section），也可以限定作用范围：
section h2:first-of-type {
font-size: 1.8em;
color: #005a9c;
}
这样每个 section 中的第一个 h2 都会被单独样式化，适用于多模块布局。
实际应用场景举例
- 博客文章中，仅为第一个
h1添加顶部留白或图标 - 帮助文档中，让每个章节的第一个
h3带有特殊背景色 - 避免重复样式，防止设计师要求“仅第一项不同”时手动加 class
基本上就这些。使用 :first-of-type 能让你的CSS更简洁、语义更清晰，无需额外类名就能实现精准的标题控制。关键是理解它基于“元素类型”而非“位置”，因此更灵活可靠。
