來講一下 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 就好,其他則可以依此類推。
這個選擇器就偶爾遇到有需求可以使用看看。