[CSS3] :nth-child() / :nth-of-type() 相关选择器

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/fukaiit/article/details/102754344

一、:nth-child() / :nth-of-type()的区别

虽然感觉nth-child用的更多，但是其实nth-of-type()理解起来更单纯，从type可见，该选择器强调“类型”：

p:nth-of-type(n){}

表示：父元素下类型为p的子元素中的第n个。先筛出要求类型，然后选第几个。

而nth-child强调“子元素”：

p:nth-child(n){}

表示：父元素下的第n个子元素，并且要求类型为p。先选出第几个，然后检查类型，如果类型不匹配，则选择失败。

二、括号中怎么写 - { an + b; n = 0, 1, 2, ...}

括号中可以填数值、关键词、an+b，归根到底其实都是an+b：

1. 数值：p:nth-child(n){}
   直接填n，表示第n个，是省略an，直接写b的结果
2. 关键词：
   (1) odd：p:nth-child(odd){}
   第奇数个，相当于2n+1
   (2) even：p:nth-child(even){}
   第偶数个，相当于2n
3. an+b：p:nth-child(an+b){}
   匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素

三、常见需求

1. 第一个

p:first-child {}
p:nth-child(1) {}

2. 前3个

p:nth-child(-n+3) {}

选择3、2、1

3. 前3个之后

p:nth-child(n+4){}

选择4、5、6…

4. 最后一个

p:last-child{}
p:nth-last-child(1){}

5. 后3个

p:nth-last-child(-n+3){}

选择倒数3、2、1

6. 后3个之前

p:nth-last-child(n+4){}

选择倒数4、5、6…

扫描二维码关注公众号，回复： 7657051 查看本文章