逼自己说几句
这篇文章是从我上一个简书账号里粘贴过来的，当时第一次学CSS选择器，记得很清楚，对于first-child和fitst-of-type确实比较懵，于是整理了他们俩的区别。
记得当时总结出来的时候有一种茅塞顿开的感觉。
所以还是说，自学，还是需要不断去写技术性博客，真的很有用。
两者的定义
- :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
- :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
定义的解析
:first-child 当出现
p:first-child时，其所匹配的元素必须符合以下两点：1.必须为p标签；2.必须为某个父元素的第一个子元素:first-of-type 当出现
p:first-of-type时，其所匹配的元素为所有子元素中的第一个p标签（不论该p标签是否为第一个子元素）
定义的深度解析
一个父元素会包括一个或多个子元素
<div class="parent">
<div>Child</div>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
在这些子元素中，只有一个是排名第一的，这就是：first-child
<div class="parent">
<div>Child</div>/*first-child*/
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
first-of-type 与 first-child 的区别在于它匹配的是该元素类型的第一个子元素，可能这个元素并不是该父元素的第一个子元素
如果 XXX:first-child 存在，任何的 XXX:first-child 肯定是 XXX:first-of-type
div class="parent">
<div>Child</div> <!-- div:first-child, div:first-of-type -->
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
如果把上面的代码的子元素的第一个 div 给换掉，比如换成 h1 ，那么这个 h1 仍然是其父元素的第一个子元素，但是已经不是第一个 div 了。第二行的 div 是其父元素的第二个子元素，而且是第一个 div 。具体的注释请看如下的代码：
<div class="parent">
<h1>Child</h1> <!-- h1:first-child, h1:first-of-type -->
<div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
同时， first-child 在任何情况下都只能匹配到一个元素，而 first-of-type 在一些情况下能匹配到不止一个元素，如下代码：
<div class="parent">
<h1>Child</h1> <!-- .parent > :first-of-type -->
<div>Child</div> <!-- .parent > :first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
实例运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child对比first-of-type</title>
<style>
.parent :first-child{
color: red;
}
.parent :first-of-type{
background: yellow;
}
.parent div:first-child{
font-size: 50px;
}
.parent div:nth-child(3){
text-decoration: line-through;
}
.parent div:first-of-type{
border: 1px green solid;
}
.parent p:first-child{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="parent">
<p>child1</p>
<div>child2</div>
<div>child3</div>
<div>child4</div>
</div>
</body>
</html>
运行结果：
详细分析以上代码得出：
.parent :first-child{
color: red;
}
以上代码匹配parent这个父元素的首个子元素，所以child1变成了红色
.parent :first-of-type{
background: yellow;
}
以上代码匹配parent这个父元素的所有标签的首个子元素，其中parent的第一个子元素是p，同时也是第一个p，parent的第二个子元素是div，同时也是第一个div，所以child1和child2的背景颜色变成了黄色
.parent div:first-child{
font-size: 50px;
}
以上代码匹配parent这个父元素的首个子元素，并且这个首个子元素必须为div，然而parent这个父元素的首个子元素为p，所以没有任何的元素被匹配上
.parent div:nth-child(3){
text-decoration: line-through;
}
以上代码匹配parent这个父元素的第三个子元素，并且这个子元素为div，所以child3有删除线的效果
.parent div:first-of-type{
border: 1px green solid;
}
以上代码匹配parent这个父元素的第一个div子元素，所以child2有实现框的效果
.parent p:first-child{
text-decoration: underline;
}
以上代码匹配parent这个父元素的第一个子元素，并且这个子元素为p，所以child1有下划线的效果
参考文章：
（完）
文档信息
- 自由转载-非商用-非衍生-保持署名
- 发表日期：2016年9月8日
