:first-of-type

版本：CSS3

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

语法:

E:first-of-type{sRules}

在一组兄弟元素中，匹配同类型的第一个元素E。

E元素的父元素最高是<html>，也就是说E可以是<body>
该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
注意：按原来定义，所选元素必须有一个父元素。从 Selectors Level 4 开始，就不需要这样了。

浏览器支持


所有浏览器都支持`:first-of-type`

例子

装饰第一个段落


<style>
	p:first-of-type{
		background-color:#f79578;
	}
</style>

<h4>这是标题</h4>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

这是标题

这是第一个段落。

这是第二个段落。

这是第三个段落。

这是第四个段落。

嵌套元素

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

<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>
<style>
article :first-of-type {
  background-color: pink;
}
</style>

This `div` is first!

This nested `span` is first!

This nested `em` is first, but this nested `em` is last!

This nested `span` gets styled!

This `b` qualifies!

This is the final `div`.