CSS 偽類用于向某些選擇器添加特殊的效果。
CSS偽類的基礎語法：
selector : pseudo-class {
property: value
}
當然，CSS類也可以與偽類搭配使用：
selector.class : pseudo-class {
property: value
}
在我第一次看到 :first-child 偽類時，我的第一個感覺就是，這是在針對指定元素的第一個子元素起作用，很明顯，我是根據(jù)字面意思來理解的。
但結果令我感到很意外，我的感覺是完全錯的，而且錯的很離譜，因為 :first-child 偽類的意思是，指定元素是上級元素中的第一個子元素時起作用，也就是，當它自己是第一個子元素時起作用，并不是之前以為的它的第一個子元素起作用。
還是先上代碼看效果吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:first-child 偽類</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í)行的效果如下圖
image
相信這段代碼和效果已經(jīng)很明顯了，目的是使用 :first-child 偽類將 p 標簽變紅。
最外層的 div 和中間第一個 div 的第一行文本都變成了紅色，因為它們的第一個元素都是 p，而第二層的第二個 div 里的第一行文本并沒有變成紅色，這是因為在這個 div 里，第一個元素是 span，并不是 p。
從這個示例及效果可以看出，:first-child 偽類僅針對指定元素或類作為當前層級的第一個元素時起作用，也就是指定元素是兄弟元素中的老大時起作用。
不得不吐槽下這個命名，也忒容易讓人誤會了些。
