本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
總算...金魚都能懂的 CSS 選取器 講了20幾篇，總算可以講到這個大家都很有興趣的 :nth-child 選取器了，看到這邊又要老話一句了 ( 夠了你! )，再次的重複一下， child 主要看的是排列順序，所以不管你寫在:nth-child 前面的是甚麼，他都只認順序喔，所以有了這樣的概念後，我們就可以開始來了解了，其實很早之前 Amos 就寫過一篇了，各位可以來這邊看看使用CSS3 :nth-child(n) 選取器教學，當然 Amos 也建議你可以先看之前寫的 「:first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器」、「:first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器」、「:only-child 獨子選取器 - 這是啥媽寶選取器」、「:only-of-type 類型獨子選取器」，看完之後再來閱讀這一篇會更輕鬆喔。
正文開始，:nth-child 選取器的語法後方會帶一組括號，並且在括號內可以寫簡單的計算公式，所以一個完整的語法會是 :nth-child( an+b ) 這樣，其中括號內的公式可以有多種計算方式，而這整個語法會非常像是程式的迴圈概念，他會一個個的計算出所有答案，然後將這些特定數的的物件選取起來。所以重點來了，括號內的公式到底有那些?
把 :nth-child() 用白話文來說的話，基本上就是 選取第 n 的子物件，而這個 n 就是我們要給予的條件，也就是我們要選取到的目標務，這個 n 可以是公式也可以使用關鍵字，我們就先來看 odd 與 even 這兩個關鍵字，我們可以在括號內使用關鍵字 odd 來選取奇數物件，而其中最重要的一點，也是程式設計師比較容易卡腦的地方就是，起始值是 1 ，讓我們用範例簡單來看一下吧。
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
CSS
li{
margin: 3px 0;
}
ul :nth-child(odd){
background-color: #CCC;
}
上面這段例子各位可以狠狠的點擊這邊看畫面，可以看到的結果會是 1、3、5、7、9 ... 這幾個奇數物件被選取到了，當然如果你是程式設計師的話，應該會卡一下，畢竟各位都是選索引值，所以就請各位程式設計師忍耐並轉腦消化一下了。
按照上面這個邏輯，那麼我們使用關鍵字 even 的話就是選取偶數囉，不多說馬上來看一下範例的 CSS 原始碼
ul :nth-child(even){
background-color: #CCC;
}
上面這段例子各位依舊可以狠狠的點擊這邊看畫面，可以看到結果就是 2、4、6、8、10...這幾個排序為偶數的物件被選取到了，這樣大家應該有比較理解了吧。
有了前面的例子後，我們就能來看選取特定單一物件的方式，我們只需要將想要選取的那個物件的排序數字寫進括號內即可，例如我想要選取的是第八個物件，那我就寫 :nth-child(8){ ...略 } 即可。如果這麼容易理解你還要看例子的話...自己寫! (兇屁啊) ㄟ不對! 我這邊寫好了，你可以狠狠的點擊這邊看畫面 。
那麼這樣可能會有朋友就會突發奇想了，想問看看是否有簡單的方式可以讓我選取到第 8 個跟第 7 個? 然後就會有新手開始自己發明語法規則了，千萬別這樣自己亂寫啊，那只是浪費你的生命、時間以及肝指數啊! 比較簡單的方式大概就是寫兩個選取器並且使用群組式宣告了，像是下方這樣
ul :nth-child(8),
ul :nth-child(7){
background-color: #CCC;
}
如果你覺得上面這樣的寫法有損你的程度的話，那麼我們也可以用比較裝逼的方式，一行搞定來選，像是下面這樣的語法
ul :nth-child(n+7):nth-child(-n+8){
background-color: #CCC;
}
上面這樣的選取方式等於是順便講解了 選取特定區間物件 的方式，你可以狠狠的點擊這邊看畫面
一開始我們講到了公式，事實上 :nth-child 最棒且最強大的地方就在於他的公式選取了，例如我們可以每隔三個就選取一個物件，這很像是迴圈在做的事情對吧! 不多說先看效果先
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
ul{
width: 500px;
margin: 100px auto;
border: 1px solid #888;
padding: 3px;
}
li{
margin: 3px 0;
font-size: 30px;
}
ul :nth-child(3n){
background-color: #CCC;
}
你可以點擊這邊看畫面，結果就是每三個裡面的第三個會被選取，如果你要每4個裡面的第4個被選取到的話，那就是直接在括號內寫 4n，是不是非常的簡單呢。
在上個例子中我們可以利用簡單的公式達到間隔選取的目的，但原理到底是甚麼? 讓我們來看一下數學公式吧! 不!!! 別折磨我了，我自小家境清寒數學不好(謎:兩者有何關聯?)，好不容易長大脫離數學的魔掌了，現在又要回去看公式，哪招啦?!別害怕! 我們只需要知道四則運算中的三個「加/減/乘」就夠了，這都是我們平日就在用的數學運算喔。
括號內的公式an+b由四個項目組成，其中 a 與 b 是可以自訂的數值，而 + 則是可變更的運算符號 ( 運算子 )，至於 n 則是一個固定且不不可更改由 0 開始的遞增數列。
除了上述的公式分解外，此外我們又可以把公式拆成兩大部分，an 指的是 a乘n 的意思，所以綜合上面一開始所講的 n 所代表的意義，我們就能像下面這樣來解釋
3n 指的是 3 乘 n，而 n 是個由0開始的固定數列 ( 就是 0123456789...n)，我們就可以得到下列結果清單
上面清單中最右側的 0、3、6、9、12 就是我們得到的結果，也就是會被選取到的物件順序了，所以 :nth-child(3n) 可以讓我們選取到第3個、第6個、第9個、第12個...不斷選下去，
上面講述了公式前段的原理，接下來來看公式an+b後段的 +b 的部分，其中 + 號是可以被變更為 - 號，也就是跟前段公式搭配起來之後，要取得的計算結果，所以假如前段是 3n 後段是 +1 的話，我們就能夠取得以下結果清單
如果我們把 + 號改成 - 號的話，:nth-child(3n-1) 就能得到以下清單。
看完公式的分析之後，這時候我們就能進一步的來看公式可以怎樣的變化，在公式中我們可以運用 ab 兩值的賦值與否來增加變化，所以就會有以下幾種公式變化
上面這一堆公式很有趣眼花吧，千萬不要被這一堆公式嚇到了，而眼尖的你應該會發現最後一個公式沒講過的樣子，其實不是沒講過，只是 Amos 沒有提到 a 也可以是負值罷了。
事實上這一堆公式中，還能繼續分析下去，但是為了節省時間，我們還是先把比較常用的提出來就好，實際上我們在專案中比較常用到的大概就是 an+b 比較多，所以真的別被這一堆公式嚇傻了，放心!
在多數的專案中，我們比較常用到的大概就是奇數 ( odd )、偶數 ( even ) 及倍數 ( an ) 這三個項目的選取，像是 3n 其實就是 3 的倍數，4n 就是 4 的倍數，就這麼簡單，要增加變化的則是多一個 倍數中的特定數 這個項目，如果說我們要選取到 3 個裡面的第 2 個項目的話，我們就能夠直接寫 3n+2，如果我們要選取到 3 個裡面的第 1 個的話，我們就寫 3n+1，根本連算都不用算啊，一眼就能看出來我要選哪個啦。
為了讓各位更加清楚 倍數中的特定數 這個選取技巧，就讓我們用表格來看看這個選取方式吧，以下 HTML 是一個很單純 3 欄 9 列的資料表格
<table>
<tbody>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
<tr>
<td>資料</td>
<td>資料</td>
<td>資料</td>
</tr>
</tbody>
</table>
如果我希望讓他每隔 3 橫列就能有一整個列的色彩，那我的 CSS 可以這樣寫
table tr:nth-child(3n){
background-color: #ccc;
}
如果我希望讓他每 3 橫列中的第 1 列有一整列的色彩，那我 CSS 可以這樣寫
table tr:nth-child(3n+1){
background-color: #ccc;
}
如果我希望讓他每 3 橫列中的第 2 列有一整列的色彩，那我 CSS 可以這樣寫
table tr:nth-child(3n+2){
background-color: #ccc;
}
是不是計算變的超級簡單了呢! (是根本不用計算了吧)
對了! 我是不是忘了講 :nth-last-child() 是做甚麼的了? 恩......簡單來說，跟 :first-child 以及 :last-child 一樣，:nth-child 是從前面開始選，而 :nth-last-child 是從結尾開始選，就這樣的差別而已，這應該不需要特地花時間解釋了吧^^
以上就是今天的 金魚都能懂的 CSS 選取器 - :nth-child - 你覺得燒腦但其實根本不燒腦的選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～
Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
iThome鐵人賽
看影片追技術