CSS :first-child伪类选择器用于匹配父元素中的第一个子元素。
:first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素，例如：
<article>
<p>
第一个段落...
</p>
<p>
第二个段落...
</p>
</article>
如果使用下面的CSS规则来添加样式，那么第一个段落的文字大小将被修改：
p:first-child {
font-size: 2em;
}
但是如果在容器中，<p>段落不是第一个元素，那么它不会被匹配，例如：
<article>
<h1>标题</h1>
<p>
第一个段落...
</p>
<p>
第二个段落...
</p>
</article>
如果还是使用上面的CSS规则，将没有<p>段落元素会被匹配。
在这种情况下，如果你想匹配第一个段落，可以使用:first-of-type伪类选择器。正如其名字所示，:first-of-type伪类选择器匹配的是某种类型元素的第一个元素。使用下面的代码将匹配H1标题之后的第一个段落元素：
p:first-of-type {
font-size: 2em;
}
示例代码
假如你有一段这样的HTML代码：
<article>
<h1>这是一个标题元素</h1>
<p>
第一个段落，但不是父元素中的第一个元素。
</p>
<p>
第二个段落。 <span>这是段落中的一个行内元素。</span>
</p>
<ul>
<li>第一个无序列表项</li>
<li>第二个无序列表项</li>
<li>第三个无序列表项</li>
</ul>
</article>
下面的代码会匹配第二个段落中的行内<span>元素。
span:first-child {
color: red;
}
下面的代码会匹配第一个无序列表项。
li:first-child {
text-decoration: underline;
color: deepPink;
}
下面的代码通过::before和::after伪元素来为<span>元素添加内容。
span:first-child::before {
content: "(";
color: deepPink;
}
span:first-child::after {
content: ")";
color: deepPink;
}
在线演示
下面的例子是上面代码的实际效果。
这是一个标题元素
第一个段落，但不是父元素中的第一个元素。
第二个段落。 这是段落中的一个行内元素。
- 第一个无序列表项
- 第二个无序列表项
- 第三个无序列表项
浏览器支持
所有的现代浏览器都支持:first-child伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 7+ 以及 Android 和 iOS。
在IE7中，如果元素是动态加入的，则不会被更新样式。
在IE8中，如果是通过链接来动态插入的元素不会被添加样式，直到该链接失去焦点。
