点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
今天来给大家列一下所有常用的结构性伪类的用法。其中大部分应该都用的很熟悉了
1. 匹配文档的根元素
:root
2. 匹配其父元素的第n个子元素
:nth-child(n)
3. 匹配其父元素倒数第n个子元素
:nth-last-child(n)
4. 匹配其父元素第n个有着相同选择器的子元素
:nth-of-type(n)
5. 匹配其父元素倒数第n个有着相同选择器的子元素
:nth-last-of-type(n)
6. 匹配其父元素的第一个子元素
:first-child
7. 匹配其父元素的最后一个子元素
:last-child
8. 匹配其父元素第一个有着相同选择器的子元素
:first-of-type
9. 匹配其父元素最后一个有着相同选择器的子元素
:last-of-type
10. 匹配其父元素的唯一子元素
:only-child
11. 匹配其父元素的唯一有着相同选择器的子元素
:only-of-type
12. 匹配没有子元素(包括文字节点)的元素
:empty
以上选择器中的n也可以写成表达式an+b,其中a和b是0或正整数,如2n、2n+1、4n+1等。
n是从0开始的整数,表达式的写法相当于把每a个子元素分成一组,取每组的第b个元素。比如2n表示匹配所有顺序是2的倍数的子元素。2n和2n+1也可以分别写成even和odd。表示第偶数,奇数个子元素。
再说一个:nth-child(n)和:nth-of-type(n)的区别。
:nth-child(n)表示其父元素的每n个子元素,无论其子元素的类别是什么。
:nth-of-type(n)表示的是同类别的第n个子元素。
具体可以参考我之前写过的文章。