在css中如何用first-of-type选中首行元素

:first-of-type用于选中父元素下同类标签的第一个元素。1. 可选中指定类型首个标签，如p:first-of-type将首个p元素文字变红；2. 在混合标签中精准定位，如div内有h2和p，p:first-of-type仅加粗首个p；3. 按标签类型区分，非所有子元素首个，若需选首个子元素应使用:first-child；4. 实际应用如去除首段上边距，p:first-of-type设置margin-top为0。关键在于理解其选择的是同类型首个而非整体首个元素。

在 CSS 中，:first-of-type 伪类用于选中其父元素下同类标签中的第一个元素。如果你想“选中首行元素”，需要明确你指的是什么类型的“首行”元素。下面根据不同情况说明如何使用 :first-of-type 来选中首个元素。

1. 选中某一类型标签的第一个元素

如果你有一组相同标签（如多个 p 或 div），可以使用 :first-of-type 选中其中第一个。

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

这段代码会让页面中第一个 <p> 元素文字变红，前提是它在其父容器中是第一个 p 类型的子元素。

2. 在混合标签中精准选中首个同类元素

当父容器内包含多种标签时，:first-of-type 依然能正确识别对应类型的第一个。

立即学习“前端免费学习笔记（深入）”；

例如 HTML 结构：

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

使用以下 CSS：

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

p:first-of-type {
  font-weight: bold;
}

只有“第一段”会加粗，因为它是所有 p 标签中的第一个，尽管前面有 h2。

3. 注意：first-of-type 是按标签类型区分的

:first-of-type 不是选中父元素的第一个子元素，而是选中第一个出现的**特定类型**的元素。比如：

• div:first-of-type 选中第一个 div
• span:first-of-type 选中第一个 span

如果想选中父元素的第一个子元素，不管类型，应该用 :first-child。

4. 实际应用场景

常用于跳过第一个元素的某些样式，比如去掉第一个段落的上边距：

p {
  margin-top: 20px;
}
p:first-of-type {
  margin-top: 0;
}

基本上就这些。关键是理解 :first-of-type 是“同类型中的第一个”，而不是“所有子元素中的第一个”。根据你的 HTML 结构合理使用，就能准确选中目标“首行”元素。

以上就是在css中如何用first-of-type选中首行元素的详细内容，更多请关注php中文网其它相关文章！