:first-of-type | CSS属性参考

CSS :first-of-type伪类选择器用于匹配元素的所有子元素类型中第一个出现的子元素。

换句话来说。:first-of-type伪类选择器匹配父元素中第一次出现的某类子元素的第一个元素，例如：

< article >    < h1 >标题</ h1 >    < p >      第一个段落...    </ p >    < p >      第二个段落...    </ p > </ article >

如果使用下面的CSS规则来添加样式，那么第一个段落的文字大小将被修改：

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

 示例代码

假如你有一段这样的HTML代码：

< div class = "container" >      < h1 >标题</ h1 >      < nav >          < ul >              < li >列表项一</ li >              < li >列表项二</ li >              < li >列表项三</ li >              < li >列表项四</ li >          </ ul >      </ nav >      < article >          < h2 >标题</ h2 >          < p >              段落内容... < a href = "#" >超链接1</ a >... < a href = "#" >超链接2</ a >          </ p >          < p >              段落内容...          </ p >      </ article >        < article >          < h2 >标题</ h2 >          < p >              段落内容...          </ p >          < p >              段落内容...          </ p >      </ article > </ div >

下面的代码会匹配.container容器中的第一个article元素。

article:first-of-type {      background-color : #eee ;      border : 1px solid #ddd ; }

下面的代码会匹配所有article元素的第一个p段落。

p:first-of-type {      font-weight : bold ; }

下面的代码不会匹配任何的p段落。

p:first-child {      font-style : italic ; }

下面的代码通过::after伪元素来为第一个超链接元素设置样式。

a:first-of-type {      color : deepPink; }   a:first-of-type::after {      content : "(" attr (href) ")" ;      color : deepPink; }

 在线演示

下面的例子是上面代码的实际效果。

标题

• 列表项一
• 列表项二
• 列表项三
• 列表项四

标题

第一个段落内容被设置为粗体字... 超链接1... 超链接2

段落内容...

标题

第一个段落内容被设置为粗体字...

段落内容...

 浏览器支持

所有的现代浏览器都支持:first-of-type伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。