css 伪类选择器:first-child与:first-of-type的区别

css :first-child选择器匹配属于父元素中第一个子元素。

css :first-of-type选择器匹配元素其父级是特定类型的第一个子元素。

对于很多朋友来说，上面的两句解释并不是很清楚，下面小编通过实例向大家解释first-child和first-of-type。

先看一下:first-child实例：

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>码农教程</p>

<h1>java教程</h1>
<p>php教程</p>
/* http://www.manongjc.com/article/1305.html */
<div class="div1">
  <span>css教程</span>
  <p>mysql教程</p>
  <p>html教程</p>
</div>
<div class="div2">
  <p>sql教程</p>
  <p>js教程</p>
</div>
</body>
</html>

运行结果图：

css 伪类选择器:first-child与:first-of-type的区别

为什么"码农教程"和"sql教程"会被选中呢？

因为p:first-child是匹配所有html文档中父元素的第一个子元素是p的元素，这里要注意两点：

第一，是在整个HTML文档中匹配
第二，父元素的第一个子元素必须是p元素，如果不是p元素就无法匹配到。

上面实例中"码农教程"作为body元素的第一个子元素，并且该子元素也是p标签，所以会被匹配到。

"mysql教程"作为div元素(class为div1)的子元素，虽然它是p元素，但是它不是div(class为div1)的第一个子元素，所以没有被匹配到。

"sql教程"作为div元素(class为div2)的第一个子元素，并且也是p元素，所以会被匹配到。

下面再来看一下first-of-type实例：

<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background-color:yellow;
}
</style>
</head>
<body>
<p>码农教程</p>

<h1>java教程</h1>
<p>php教程</p>

<div>
  <span>css教程</span>
  <p>mysql教程</p>
  <p>html教程</p>
</div>
<div>
  <p>sql教程</p>
  <p>js教程</p>
</div>
</body>
</html>

运行结果如下：

css 伪类选择器:first-child与:first-of-type的区别

p:first-of-type需要注意两点：

第一，是在整个HTML文档中匹配
第二，p:first-of-type选取的是父元素里的第一个子元素p标签，并不要求父元素的第一个子元素必须是p标签。

上面实例中，body的第一个p标签子元素为"码农教程"，所以该元素会被选中。

同理“mysql教程”和"sql教程"作为div(class为div1和class为div2)元素的第一个p标签，所以也会被选中.

综上所述：

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

:first-child要求子元素的第一个元素必须是特定标签，而:first-of-type并没有要求这点。