整理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) 选取器教学

查看原文 >>