最近都在忙著面試，有些面試官人很好，如果有不懂的地方，他們會試著教你，所以我也藉由面試學到了蠻多東西（真的謝謝面試官大大）。 像是學到了 :nth-child() 跟 :nth-of-type() 這兩個的用法，回家也試著玩了一下，蠻有趣的，之後可以運用在 side-project 看看，這篇文章先來介紹這兩者的使用方法。

蝦米是 pseudo-class？

pseudo-class，中文是偽類選取器，是 class 的一種，都是由一個冒號作為開頭，例如常見的 :hover。

:nth-child() 怎麼用？

不囉嗦，直接看用法

可以看到如果想要指定某個物件改變樣式的話，就可以使用 :nth-child(n)，數值從 1 開始算起，所以如果要選第 4 個，那就是輸入 4；如果要選擇 1、2、5 的話，就可以這樣寫：

1
2
3
4
5
ul :nth-child(1),
ul :nth-child(2),
ul :nth-child(5) {
  color: red;
}

選取奇數或偶數的用法

如果你想把奇數欄位的 list 都改成紅色，而把偶數欄位的 list 都改成綠色的話，只要在括號中輸入關鍵字，奇數是 odd，而偶數是 even，就如同下方範例一樣：

間隔跳位選取的用法

如果你想嘗試類似迴圈的用法，例如每間隔 3 個就改變樣式，那麼就可以直接在括號中加入 3n，就可以做到每間隔 3 個就把 list 改成紅色了，例如下方例子：

它在括號內的公式是 An + B，A 跟 B 是可以自訂的數值，+ 是可以變更的運算符號，而 n 則是由 0 開始的正整數，所以如果是 3n 的話，所得到的結果那就會是選取的物件，例如：

1
2
3
4
3 x 0 = 0
3 x 1 = 3 // 第 3 個物件
3 x 2 = 6 // 第 6 個物件
3 x 3 = 9 // 第 9 個物件

所以也會有其他的變化式，例如想選擇 4 個裡面的第 3 個的話，那就是 4n+3，可以看下方例子：

:nth-of-type() 怎麼用？

跟 :nth-child() 差不多的用法，差別在於是會先將網頁中的物件先依標籤來分類，然後再做同類的順序選取，如果要指定某個物件改變樣式的話，就可以使用 :nth-of-type(n)，數值從 1 開始算起，所以如果要選第 4 個，那就是輸入 4，可以看下方範例：

所以當選取了 2、4、5 的物件時，代表選取了第 2、4、5 個 <h2> 和 <p>。

選取奇數或偶數的用法

基本上也是跟 :nth-child() 差不多的用法，只要在括號中輸入關鍵字，奇數是 odd，而偶數是 even，就如同下方範例一樣：

間隔跳位選取的用法

一樣也有類似迴圈的用法，例如每間隔 3 個就改變樣式，那麼就可以直接在括號中加入 3n，就可以做到每間隔 3 個就把元素改成紅色了，例如下方例子：