17370845950

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

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

理解 :first-of-type 的选择逻辑

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

  

这是第一个段落

  一个 span 元素
  

这是第二个段落

  

这是第三个段落

如果你使用以下 CSS：

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

那么第一个

元素

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

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

  开头的 span
  

第一个段落

  

第二个段落

上面这段代码中，p:first-of-type 依然能选中第一个

，因为它是在所有 p 元素中排第一的，即使它不是 div 的第一个子元素。

与 :first-child 的区别

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

• :first-child 要求元素必须是父元素的第一个子元素，不管类型
• :first-of-type 只要求是某一类型中的第一个，不要求整体位置

继续以上面的例子说明：

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 时需注意几点：

• 它基于元素类型，所以 div:first-of-type 会选择第一个 div 类型的子元素
• 不支持 IE8 及更早版本，现代浏览器均支持良好
• 可与其他选择器组合，如 .class:first-of-type 或 p:nth-of-type(1)（功能类似）

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