版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
文章目录
一、: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:
- 数值:
p:nth-child(n){}
直接填n,表示第n个,是省略an,直接写b的结果 - 关键词:
(1) odd:p:nth-child(odd){}
第奇数个,相当于2n+1
(2) even:p:nth-child(even){}
第偶数个,相当于2n - 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…