CSS伪类:first-of-type如何选择首个类型元素_使用:first-of-type调整首个元素样式-css教程-PHP中文网

CSS伪类:first-of-type如何选择首个类型元素_使用:first-of-type调整首个元素样式

P粉602998670

发布： 2025-11-27 18:37:02

原创

358人浏览过

:first-of-type选择同类型子元素中的第一个，如p:first-of-type选中首个p元素，即使前面有其他标签；与:first-child不同，后者要求必须是父元素的第一个子节点。

css伪类:first-of-type如何选择首个类型元素_使用:first-of-type调整首个元素样式

:first-of-type 是 CSS 中的一个结构伪类，用于选择父元素中具有相同标签类型的第一个子元素。它不关心该元素在父容器中的总顺序，只关注其元素类型（即标签名）是否是同类型中的第一个。

假设你有一段 HTML 内容如下：

<div>
  <p>这是第一个段落</p>
  <span>一个 span 元素</span>
  <p>这是第二个段落</p>
  <p>这是第三个段落</p>
</div>

如果你使用以下 CSS：

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

那么第一个 <p> 元素会被选中并变成红色文字。尽管它是父元素中的第一个子元素，但真正起作用的是它是所有 p 标签中的第一个。

即使前面有其他类型的元素，只要它是该类型中最早出现的，就会被匹配。例如：

<div>
  <span>开头的 span</span>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

上面这段代码中，p:first-of-type 依然能选中第一个 <p>，因为它是在所有 p 元素中排第一的，即使它不是 div 的第一个子元素。

很多人容易混淆 :first-of-type 和 :first-child。它们的关键区别在于：

Kive

一站式AI图像生成和管理平台

171

继续以上面的例子说明：

div > p:first-child { color: blue; }

这个规则不会生效，因为 p 不是 div 的第一个子元素（span 才是）。而用 :first-of-type 就可以成功选中。

:first-of-type 在以下场景中非常实用：

比如你想让一篇文章中第一个段落字体更大：

article p:first-of-type {
font-size: 1.2em;
font-weight: bold;
}

这样无论前面有没有 h1、img 或其它标签，只要是第一个 p，就能被正确选中。

使用 :first-of-type 时需注意几点：

基本上就这些。掌握 :first-of-type 能让你更灵活地控制文档中特定类型首个元素的样式，而不必依赖额外的 class 或 JS 操作。

以上就是CSS伪类:first-of-type如何选择首个类型元素_使用:first-of-type调整首个元素样式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：