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;
}
|
在线演示
下面的例子是上面代码的实际效果。
浏览器支持
所有的现代浏览器都支持:first-of-type
伪类选择器,包括:Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。