CSS 偽類(lèi)用于向某些選擇器添加特殊的效果惊楼。
CSS偽類(lèi)的基礎(chǔ)語(yǔ)法：
selector : pseudo-class {
property: value
}
當(dāng)然狰右，CSS類(lèi)也可以與偽類(lèi)搭配使用：
selector.class : pseudo-class {
property: value
}
在我第一次看到 :first-child 偽類(lèi)時(shí)杰捂，我的第一個(gè)感覺(jué)就是，這是在針對(duì)指定元素的第一個(gè)子元素起作用棋蚌，很明顯嫁佳，我是根據(jù)字面意思來(lái)理解的。
但結(jié)果令我感到很意外谷暮，我的感覺(jué)是完全錯(cuò)的蒿往，而且錯(cuò)的很離譜，因?yàn)?:first-child 偽類(lèi)的意思是湿弦，指定元素是上級(jí)元素中的第一個(gè)子元素時(shí)起作用瓤漏，也就是，當(dāng)它自己是第一個(gè)子元素時(shí)起作用颊埃，并不是之前以為的它的第一個(gè)子元素起作用赌蔑。
還是先上代碼看效果吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:first-child 偽類(lèi)</title>
<style>
div {
border: solid 1px aqua;
padding: 10px;
margin: 10px auto;
}
.box {
width: 300px;
}
p:first-child {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>最外層第一行文本</p>
<p>最外層第二行文本</p>
<div>
<p>第二層第一行文本</p>
<p>第二層第二行文本</p>
</div>
<div>
<span>第二層第一行文本</span>
<p>第二層第二行文本</p>
<p>第二層第三行文本</p>
</div>
</div>
</body>
</html>
上面這塊兒代碼，執(zhí)行的效果如下圖
相信這段代碼和效果已經(jīng)很明顯了竟秫，目的是使用 :first-child 偽類(lèi)將 p 標(biāo)簽變紅娃惯。
最外層的 div 和中間第一個(gè) div 的第一行文本都變成了紅色，因?yàn)樗鼈兊牡谝粋€(gè)元素都是 p肥败，而第二層的第二個(gè) div 里的第一行文本并沒(méi)有變成紅色趾浅，這是因?yàn)樵谶@個(gè) div 里愕提，第一個(gè)元素是 span，并不是 p皿哨。
從這個(gè)示例及效果可以看出浅侨，:first-child 偽類(lèi)僅針對(duì)指定元素或類(lèi)作為當(dāng)前層級(jí)的第一個(gè)元素時(shí)起作用，也就是指定元素是兄弟元素中的老大時(shí)起作用证膨。
不得不吐槽下這個(gè)命名如输，也忒容易讓人誤會(huì)了些。
