首页 > 文章 > 前端

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

时间：2025-10-31 22:22:40 133浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS中使用:first-of-type选择器可精准定位特定类型的第一个元素。该选择器会匹配父元素下指定标签类型中的第一个子元素，无论其是否为首个子元素。例如，若需选取

标签中的第一个元素，可编写如下代码：div:first-of-type { /* 样式规则 */ }此选择器常用于对列表、表格等结构化内容进行样式定制，确保仅对目标元素应用特定样式，避免影响其他同类型元素。通过结合其他选择器（如类选择器或ID选择器），可进一步精确控制样式应用范围。需要注意的是，:first-of-type与:first-child的区别在于，前者基于元素类型，而后者基于子元素的顺序。理解这一差异有助于更灵活地运用选择器实现复杂布局和样式需求。》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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

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

在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学习网公众号！