CSS中:first-of-type选择器使用方法详解

CSS中的:first-of-type伪类是一种精准、无需额外HTML标记的样式控制工具，它专门用于选中父元素内同类型标签的第一个实例——无论该元素在所有子元素中的位置如何，只要它是该标签（如p、li、div等）首次出现，就能被可靠匹配；相比:first-child，它更灵活、更符合实际布局需求，广泛适用于首段强调、列表首项美化、图片间距重置等场景，是现代CSS开发中提升代码简洁性与可维护性的实用技巧。

在CSS中，:first-of-type 伪类用于选择其父元素中具有相同标签类型的第一个子元素。它会忽略其他类型的兄弟元素，只关注指定的元素类型。

基本语法与作用

使用 :first-of-type 可以选中某一类型（如 p、div、li 等）在父容器中的第一个实例。它不依赖于该元素在所有子元素中的位置，只要它是该类型中出现的第一个即可。

p:first-of-type {
  color: red;
}

这段代码会让父元素中第一个 p 标签文字变为红色，即使前面有其他元素（如 div 或 h2），也不影响选择逻辑。

实际应用场景

这个选择器常用于对特定类型元素进行初始化样式设置，比如段落、列表项或标题。

• 选择第一个段落并加粗：p:first-of-type { font-weight: bold; }
• 为第一个列表项添加背景：li:first-of-type { background: #f0f0f0; }
• 仅对第一个图片设置边距：img:first-of-type { margin-top: 0; }

与其他选择器的区别

:first-of-type 和 :first-child 不同。前者只看元素类型，后者要求该元素必须是父元素下的第一个子节点。

<div>
  <h2>标题</h2>
  <p>第一段</p>
  <p>第二段</p>
</div>

此时 p:first-of-type 能选中“第一段”，因为它是第一个 p 元素；但 p:first-child 无法匹配任何元素，因为 p 不是第一个子节点。

结合类或属性更精确控制

可以将 :first-of-type 与其他选择器组合，实现更精准的选择。

.content p:first-of-type {
  text-indent: 2em;
}

这表示只对 class 为 content 的容器内的第一个 p 元素设置首行缩进。

基本上就这些。掌握 :first-of-type 能帮助你在不添加额外类名的情况下，准确选中所需元素。关键是理解“类型”指的是标签类型，并且选择的是该类型中的首个实例。

今天关于《CSS中:first-of-type选择器使用方法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！