:first-of-type

CSS 中的 :first-of-type 选择器允许您定位其容器中元素的第一个出现。它在 CSS 选择器级别 3 规范 中被定义为“结构伪类”，这意味着它用于根据其与父级和同级内容的关系对内容进行样式化。

假设我们有一篇文章，其中包含标题和多个段落

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>

我们希望使第一个段落更大，作为一种“引言”或介绍性段落。与其赋予它一个类，不如使用 :first-of-type 来选择它

p:first-of-type {
  font-size: 1.25em;
}

使用 :first-of-type 与 :nth-child 非常相似，但存在一个关键区别：它不太具体。在上面的示例中，如果我们使用了 p:nth-child(1)，则不会发生任何事情，因为段落不是其父元素（<article>）的第一个子元素。这揭示了 :first-of-type 的强大功能：它定位特定类型的元素在特定排列中的目标与其相似的同级元素相关，而不是所有同级元素。

下面的更完整的示例演示了 :first-of-type 和相关伪类选择器 :last-of-type 的使用。

Check out this Pen!

其他资源

• 相关：last-of-type，nth-of-type，nth-last-of-type
• Mozilla 文档

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
有效	3.2+	有效	9.5+	9+	有效	有效

:first-of-type 在 CSS 选择器模块 3 中引入，这意味着旧版本的浏览器不支持它。但是，现代浏览器的支持非常出色，新的伪选择器在生产环境中被广泛使用。如果您需要较旧的浏览器支持，请 为 IE 使用 polyfill，或者以渐进增强的方式使用这些选择器，这是一种推荐的做法。