:first-of-type - CSS（层叠样式表） 编辑

CSS 伪类 :first-of-type表示一组兄弟元素中其类型的第一个元素。

/* 选择在父元素中第一个出现的<p>，而不管其在兄弟内的位置如何 */
p:first-of-type {
  color: red;
}

注意：按原来定义，所选元素必须有一个父元素。 从 Selectors Level 4 开始，就不需要这样了。

语法

:first-of-type

例子

装饰第一个段落

HTML

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 1</p>

CSS

p:first-of-type {
  color: red;
  font-style: italic;
}

结果

嵌套元素

下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，通配符(*)是默认应用的。 

HTML

<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`.</div>
</article>

CSS

article :first-of-type {
  background-color: pink;
}

结果

规范

Specification	Status	Comment
Selectors Level 4 :first-of-type	Working Draft	Matching elements are not required to have a parent.
Selectors Level 3 :first-of-type	Recommendation	Initial definition.

浏览器兼容

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

相关知识

• :first-child, :last-of-type, :nth-of-type