CSS 的 :nth-child(n) 與 :nth-of-type(n) 選擇器

來講一下 CSS 的 :nth-child(n) 與 :nth-of-type(n) 選擇器。

首先如果我們有像這樣的 HTML 結構：

<div class="">item 1</div>
<div class="">item 2</div>
<div class="">item 3</div>
<div class="">item 4</div>

如果我想要設定其中第 n 個 div 的樣式，就可以使用 :nth-child(n)，裡面的 n 就是代表第幾個。

比如：

div:nth-child(2){
  background: red;
}

這樣第 2 個 div 就會變成紅色的底色。

可是如果我們在裡面多插入一個元素像是：

<div class="">item 1</div>
<h2>Hello</h2>
<div class="">item 2</div>
<div class="">item 3</div>
<div class="">item 4</div>

因為在這裡面第 2 個元素變成 h2 而不是我們寫的 div:nth-child(2) 不符合選擇條件所以就不會被選到了。

那如果還是想要選取第二個 div，則可以考慮使用 :nth-of-type()，所以我把 CSS 改成這樣：

div:nth-of-type(2){
  background: red;
}

這樣第二個 div 就一樣可以被選到了。

另外這兩個選擇器裡面的 n 也可以帶不是固定的某個值，像是我使用 :nth-child(2n)，就會變成第偶數個被選取到：

div:nth-child(2n){
  background: red;
}

要奇數個的話就用 2n+1 就好，其他則可以依此類推。
這個選擇器就偶爾遇到有需求可以使用看看。