定義
- :first-child
選擇器用于選取屬于其父元素的首個子元素的指定選擇器。 - first-of-type
選擇器匹配屬于其父元素的特定類型的首個子元素的每個元素。
定義的解析
:first-child
當出現(xiàn)p:first-child時，其所匹配的元素必須符合以下兩點：1.必須為p標簽；2.必須為某個父元素的第一個子元素:first-of-type
當出現(xiàn)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 的區(qū)別在于它匹配的是該元素類型的第一個子元素，可能這個元素并不是該父元素的第一個子元素
如果 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 仍然是其父元素的第一個子元素，但是已經(jīng)不是第一個 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有實現(xiàn)框的效果
.parent p:first-child{
text-decoration: underline;
}
以上代碼匹配parent這個父元素的第一個子元素，并且這個子元素為p，所以child1有下劃線的效果
參考文章：
2016.8.10第一次更新
