在css中如何用:first-of-type选择特定类型第一个元素

:first-of-type 选择父元素中同类型的首个子元素，如 p:first-of-type 选中第一个 p 标签，不受其他类型元素影响，常用于段落、列表等首项样式设置。

在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 不同。前者只看元素类型，后者要求该元素必须是父元素下的第一个子节点。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

<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选择特定类型第一个元素的详细内容，更多请关注php中文网其它相关文章！