逼自己說(shuō)幾句
這篇文章是從我上一個(gè)簡(jiǎn)書賬號(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í)候有一種茅塞頓開的感覺(jué)。
所以還是說(shuō)，自學(xué)，還是需要不斷去寫技術(shù)性博客，真的很有用。
兩者的定義
- :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ì)比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有刪除線的效果
.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有下劃線的效果
參考文章：
（完）
文檔信息
- 自由轉(zhuǎn)載-非商用-非衍生-保持署名
- 發(fā)表日期：2016年9月8日
