最近終於搞懂要如何使用 nth-child 這個 CSS selector，所以要來好好記錄一番！希望也可以給大家參考參考～
不知道有沒有人跟我一樣，剛開始接觸的時候對 first-child 常常搞錯，總是自己把它理解成父元素下的第一個小孩，然後就硬寫父元素的 class 去選，可想而知當然是一點作用也沒有，想不出個所以然就乾脆還是麻煩點多命名了個 class（現在想想覺得自己很蠢
所以我說到底是哪個小孩？
直到最近誤打誤撞，終於讓我搞清楚了，應該是要理解成「我是兄弟姐妹中的第幾個小孩」，何謂我是第幾個小孩呢？請參考以下範例。
用 div 切版時，我們常常會這樣寫，在一個 div 中包了很多個小 div，而這些小 div 通常為類似的長相，所以會有相同的 class，你可以想這些有相同 class的小 div 就是兄弟姐妹，因此如果我們今天只想挑選特定的兄弟姐妹時，nth-child 就登場了。
用 child 的 class 搭配 nth-child
記得前面說的「我是兄弟姐妹中的第幾個小孩」，所以絕對不用父元素的 class 去選(也可以不寫 class 單用 html tag 搭配)，而是子元素的 class，讓我們再細看剛剛的範例，當我想要選到第一個 child 時，可以理解成「我是class=”child” 當中的第一個小孩」，因此 CSS 就可以寫成
.child:first-child 或 .child:nth-child(1)
再推演，如果我想要選最後一個小孩，就要理解成「我是 class=”child” 當中的最後一個小孩」或在此範例亦可說「我是 class=”child” 當中的第六個小孩」，因此 CSS 就可以寫成
.child:last-child 或 .child:nth-child(6)
我想選奇數、偶數甚至369的小孩
nth-child 最好用的地方就在於可以下公式，讓我們繼續參考剛剛的範例，會發現 CSS 的第五行我寫的是 .child:nth-child(2n)，2n 意思就是說，我只選2的倍數（偶數）的小孩，所以可以發現第二個和第四個 Hello 字就變成藍色了。
那你可能會問為什麼第六個小孩是綠色，記得 CSS 是照順序在讀的，底層的設定會覆寫掉上層的設定，由於我在最後把 last-child 改成了綠色，因此原本變成藍色的第六個小孩，就因為這層設定又變成綠色啦～
以上今日的筆記小分享，希望有讓大家更了解如何使用 nth-child！前端路還很遠渺小的我要繼續努力啦！
