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。