网站首页 > 技术文章正文

CSS结构性伪类详解 css 3中属于结构化伪类选择器的是

hmc789 2024-11-09 13:03:36 技术文章 2 ℃

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

今天来给大家列一下所有常用的结构性伪类的用法。其中大部分应该都用的很熟悉了

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个子元素。

具体可以参考我之前写过的文章。