: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`.