CSS 偽類 child 和 of-type
對於 CSS 的初學者而言，比較不容易理解的大概就是 偽類 以及 偽元素 ，一個比較簡單的區分，偽類開頭會是一個冒號，偽元素開頭是兩個冒號，這篇文章主要介紹偽類，偽元素的部分會在其他文章中再度提及。通常比較常用到的偽類大概就是超連結的錨點偽類：a:link、a:hover、a:active和a:visited這四種，但偽類真正的精華在於可以比較精準地控制 HTML 當中的各個 DOM，不僅僅只有這四種而已，偽類分為四大類，第一大類就是剛剛所提到的「錨點偽類」，也就是跟隨在超連結後的這四種，第二類是「狀態偽類」，就是描述:checked、unchecked、:enabled、:disabled這幾種，而另外兩類則是-child和of-type，這兩類是因為 CSS3 新增的偽類，也比較容易搞混，於是今天就來針對這兩類做說明。
child 顧名思義，就是小孩子的意思，換句話說，凡是套上 child 的 DOM，外頭的 DOM 就是他的爸爸 ( 父元素 )，不管裏頭的元素是甚麼，都是 child，而 child 又有以下幾種：
- :first-child：第一個子元素
- :last-child：最後一個子元素
- :nth-child(數字)：第幾個子元素
- :nth-child(2n)：挑出偶數的元素(2的倍數)
- :nth-child(2n+1)：挑出奇數的元素
- :nth-last-child(數字)：從後面數來第幾個子元素
- :only-child：只有一個子元素
光是列出來可能還沒有感覺，直接來看看效果，假設你的程式碼如下：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
你的 CSS 如下：
li{
list-style:none;
float:left;
width:20px;
height:20px;
background:#ccc;
margin:5px;
}
那麼出來的長相應該會是這樣：
現在我們來試試看 :first-child，照著以下的 CSS 來寫
li:first-child{
background:#c00;
}
所呈現的畫面就會變成這樣：
last-child
li:last-child{
background:#00c;
}
:nth-child(數字) 挑選第幾個 ( 注意，這裡是 1 起頭，不是 0 )
li:nth-child(2){
background:#c00;
}
:nth-child(2n) 把偶數的挑出來 ( 應該說是把 2 的倍數挑出來 )
li:nth-child(2n){
background:#c00;
}
:nth-child(2n+1) 把奇數的挑出來，其他就依此類推
li:nth-child(2n+1){
background:#c00;
}
至於 nth-last-child() 剛好就和 nth-child 相反過來，是從後面數過來的，這裡就不多做說明，而最後一個 only-child()，只適用於父元素內只有一個子元素的情形，例如你的程式碼是：
<ul>
<li>ok</li>
</ul>
<br/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
當我們撰寫 li:only-child{ background:#c00; }，只有第一組 ul 會變色而已，因為第一組 ul 只有一個元素，第二組 ul 則具有五個元素，就如同下圖所示：
不過，不要以為 child 的偽類就這麼簡單，裏頭隱藏著一個很容易搞混的地方，如果今天子元素不是單純的 li，而是許多元素混雜而成的，你就會發現 :first-child 無法精準地控制第一個子元素了，例如：
<div id="test">
<div>1</div>
<span>2</span>
<span>3</span>
<span>4</span>
<div>5</div>
<span>6</span>
<div>7</div>
</div>
我們的 CSS 這樣寫：
#test div, #test span{
width:20px;
height:20px;
background:#ccc;
display:inline-block;
margin:5px;
}
長相會是這樣：
這時候如果我們寫了
#test span:first-child{
background:#c00;
}
就會發現完全沒有反應！？為什麼呢？因為 child 是只所有的子元素，裏頭的 :first-child 表示 div，但又因為我們指向 span，所以導致這個 CSS 是不會被套用進去的，這也是在使用 child 的偽類很容易遇到的錯誤，卻又不知道錯誤是如何發生，那麼到這邊，或許你會問，如果交錯混雜，我又想要選取固定元素該怎麼辦呢？這時候我們就要用上 of-type 的偽類,of-type 的偽類也有以下幾種：
- :first-of-type：同一種元素的第一個
- :last-of-type：同一種元素的最後一個
- :nth-of-type()：同一種元素裏頭的第幾個
- :nth-last-of-type()：同一種元素從後面屬過來第幾個
- :only-of-type：只有這種元素
經過剛剛的 child 介紹，相信大家對於上述的這些名詞解釋應該都可以想像出畫面了吧，也因此如果我們要控制剛剛那串程式碼的第一個 span，我們就要這樣寫：
#test span:first-of-type{
background:#c00;
}
就會如上圖看到的，第一個 span 就變色了，也因如此，善用這些好用的偽類，我們更可以精準地控制我們所要控制的元素囉！