逼自己說(shuō)幾句
這篇文章是從我上一個(gè)簡(jiǎn)書(shū)賬號(hào)里粘貼過(guò)來(lái)的烛芬，當(dāng)時(shí)第一次學(xué)CSS選擇器，記得很清楚，對(duì)于first-child和fitst-of-type確實(shí)比較懵杉允，于是整理了他們倆的區(qū)別。
記得當(dāng)時(shí)總結(jié)出來(lái)的時(shí)候有一種茅塞頓開(kāi)的感覺(jué)席里。
所以還是說(shuō)叔磷，自學(xué)，還是需要不斷去寫(xiě)技術(shù)性博客奖磁，真的很有用改基。
兩者的定義
- :first-child 選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器。
- :first-of-type 選擇器匹配屬于其父元素的特定類(lèi)型的首個(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ū)別在于它匹配的是該元素類(lèi)型的第一個(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ì)比f(wàn)irst-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汽久，所以沒(méi)有任何的元素被匹配上
.parent div:nth-child(3){
text-decoration: line-through;
}
以上代碼匹配parent這個(gè)父元素的第三個(gè)子元素鹤竭，并且這個(gè)子元素為div，所以child3有刪除線(xiàn)的效果
.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有下劃線(xiàn)的效果
參考文章：
（完）
文檔信息
- 自由轉(zhuǎn)載-非商用-非衍生-保持署名
- 發(fā)表日期：2016年9月8日
