定義
- :first-child
選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器纹蝴。 - first-of-type
選擇器匹配屬于其父元素的特定類型的首個(gè)子元素的每個(gè)元素娄涩。
定義的解析
:first-child
當(dāng)出現(xiàn)p:first-child時(shí)捷雕，其所匹配的元素必須符合以下兩點(diǎn)：1.必須為p標(biāo)簽际跪；2.必須為某個(gè)父元素的第一個(gè)子元素:first-of-type
當(dāng)出現(xiàn)p:first-of-type時(shí)宪睹，其所匹配的元素為所有子元素中的第一個(gè)p標(biāo)簽（不論該p標(biāo)簽是否為第一個(gè)子元素）
定義的深度解析
一個(gè)父元素會(huì)包括一個(gè)或多個(gè)子元素
<div class="parent">
<div>Child</div>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
在這些子元素中团搞，只有一個(gè)是排名第一的，這就是：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ū)別在于它匹配的是該元素類型的第一個(gè)子元素，可能這個(gè)元素并不是該父元素的第一個(gè)子元素
如果 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>
如果把上面的代碼的子元素的第一個(gè) div 給換掉因悲，比如換成 h1 ，那么這個(gè) h1 仍然是其父元素的第一個(gè)子元素中贝，但是已經(jīng)不是第一個(gè) div 了囤捻。第二行的 div 是其父元素的第二個(gè)子元素，而且是第一個(gè) div 邻寿。具體的注釋請(qǐng)看如下的代碼：
<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>
同時(shí)蝎土， first-child 在任何情況下都只能匹配到一個(gè)元素，而 first-of-type 在一些情況下能匹配到不止一個(gè)元素绣否，如下代碼：
<div class="parent">
<h1>Child</h1> <!-- .parent > :first-of-type -->
<div>Child</div> <!-- .parent > :first-of-type -->
<div>Child</div>
<div>Child</div>
</div>
實(shí)例運(yùn)用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child對(duì)比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>
運(yùn)行結(jié)果：
詳細(xì)分析以上代碼得出：
.parent :first-child{
color: red;
}
以上代碼匹配parent這個(gè)父元素的首個(gè)子元素誊涯，所以child1變成了紅色
.parent :first-of-type{
background: yellow;
}
以上代碼匹配parent這個(gè)父元素的所有標(biāo)簽的首個(gè)子元素，其中parent的第一個(gè)子元素是p蒜撮，同時(shí)也是第一個(gè)p暴构，parent的第二個(gè)子元素是div，同時(shí)也是第一個(gè)div段磨，所以child1和child2的背景顏色變成了黃色
.parent div:first-child{
font-size: 50px;
}
以上代碼匹配parent這個(gè)父元素的首個(gè)子元素取逾，并且這個(gè)首個(gè)子元素必須為div，然而parent這個(gè)父元素的首個(gè)子元素為p苹支，所以沒有任何的元素被匹配上
.parent div:nth-child(3){
text-decoration: line-through;
}
以上代碼匹配parent這個(gè)父元素的第三個(gè)子元素砾隅，并且這個(gè)子元素為div，所以child3有刪除線的效果
.parent div:first-of-type{
border: 1px green solid;
}
以上代碼匹配parent這個(gè)父元素的第一個(gè)div子元素债蜜，所以child2有實(shí)現(xiàn)框的效果
.parent p:first-child{
text-decoration: underline;
}
以上代碼匹配parent這個(gè)父元素的第一個(gè)子元素晴埂，并且這個(gè)子元素為p，所以child1有下劃線的效果
參考文章：
2016.8.10第一次更新
