前端無遠弗屆

整理nth-child的幾種應用方式

假設有數字1~10

1、除了第n個之外的全部

     :nth-child(n+6)  ---------- 從第六個開始(選擇除了前面5個外的全部元素，即6、7、8、9、10)

2、只選擇前面的幾個

     :nth-child(-n+5)  ---------- 只選擇前面的5個元素 (即1、2 、3、4、5)

3、從開始的那個，間隔x個選擇

     :nth-child(4n-7)  ---------- 從第1個開始，每隔4個就選擇 (即1、5、9)

     :nth-child(4n+1)  ---------- 從第1個開始，每隔4個就選擇 (即1、5、9)

4、奇、偶數

     :nth-child(odd)  ------- 奇數 (即1、3、5、7、9)

     :nth-child(even)  ------ 偶數 (即2、4、6、8、10)

5、只選擇第n個

     :nth-child(n)

     :nth-child(5) ---------- 只選擇第5個元素 (即5)

6、選擇第一個

     :first-child

7、選擇最後一個
     :last-child

8、選擇倒數第n個

     :last-child(n)

     :last-child(3) ---------- 選擇倒數第3個元素 (即8)

使用前，先確認各家瀏覽器的支持度 Can I use

更進階的nth-child 選擇器計算方式 使用CSS3 :nth-child(n) 選取器教學