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

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。