:first-child与:first-of-type 区别
:first-child与:first-of-type 区别属于前端实例代码，有关更多实例代码大家可以查看。
标题中两个选择器的更多用法可以参阅如下两篇文章：
（1）.CSS E:first-child 选择器一章节。
（2）.CSS E:first-of-type 选择器一章节。
两个选择器在某些场景下表现完全一致，所以会造成一些困扰。
功能简述如下：
（1）.E:first-child选择器匹配父元素下，E类型，第一个子元素，。
（2）.E:first-of-type选择器匹配父元素下，E类型、相同类型标签元素集合中第一个子元素。
首先给出两个选择器的区别简单总结：
E:first-child匹配的是父元素的第一个子元素（E类型）。
而E:first-of-type匹配的是父元素下各个标签类型集合中第一个子元素（E类型）。
看了前面的总结如果还不太清晰，不用担心，后面有详细的代码演示。
特别说明：E表示一个CSS选择器，不要误解为仅表示元素选择器。
首先看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#one li:first-child{
color:blue;
}
#two li:first-of-type{
color:blue;
}
</style>
</head>
<body>
<ul id="one">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
<ul id="two">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
</body>
</html>
代码运行效果截图如下：
上述代码中两个选择器表现完全相同，再来看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#one span:first-child{
color:blue;
}
#two span:first-of-type{
color:blue;
}
span{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
<div id="one">
<p>前端教程网一</p>
<span>前端教程网二</span>
<span>前端教程网三</span>
<h1>前端教程网四</h1>
</div>
<div id="two">
<p>前端教程网一</p>
<span>前端教程网二</span>
<span>前端教程网三</span>
<h1>前端教程网四</h1>
</div>
</body>
</html>
代码运行效果截图如下：
span:first-child匹配div第一个子元素，但最必须是span元素，所以第一个div中没有符合要求的。
span:first-of-type匹配div下第一个span元素。
上面的代码并没有完全体现出E:first-of-type选择器的功能，下面单独对其进行一下演示。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.a:first-of-type{
color:blue;
}
span,a{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
<div>
<p class="a">前端教程网一</p>
<span class="a">前端教程网二</span>
<span>前端教程网三</span>
<h1>前端教程网四</h1>
<h1 class="a">前端教程网四</h1>
<a>前端教程网四</a>
</div>
</body>
</html>
代码运行效果截图如下：
代码分析如下：
（1）.首先使用利用class选择器匹配到所有class属性值为"a"的元素。
（2）.然后按照标签类型将匹配到元素进行分类，将每一个类别中的第一个元素颜色设置为蓝色。
（3）.p元素只有一个，当然也算是第一个，所以字体颜色设置为蓝色。
（4）.具有两个span元素，但是class属性值等于"a"的那个是span元素集合的第一个，所以匹配成功。
（5）.具有两个h1元素，class属性值为"a"的h1元素位于h1元素集合第二位，匹配失败。
最后总结如下：
E:first-child满足如下两个条件即可匹配成功：
（1）.元素被E选择器匹配。
（2）.且位于父元素的第一位。
E:first-of-type匹配成功需要满足如下条件：
（1）.元素被E选择器匹配。
（2）.且元素位于各个标签类别集合的第一位。
:first-child与:first-of-type 区别，这样的场景在实际项目中还是用的比较多的，关于:first-child与:first-of-type 区别就介绍到这了。