伪类选择器汇总

伪类选择器汇总（图片来源网络，侵删）

1. 结构性伪类选择器

结构性伪类选择器主要用于选取DOM树中特定位置的元素。

伪类选择器	描述
`:root`	选取文档的根元素，即HTML元素
`:nthchild(n)`	选取父元素的第n个子元素
`:firstchild`	选取父元素的第一个子元素
`:lastchild`	选取父元素的最后一个子元素
`:nthlastchild(n)`	选取父元素的倒数第n个子元素
`:onlychild`	选取没有兄弟元素的子元素，等价于`:nthchild(1):nthlastchild(1)`
`:firstoftype`	选取兄弟元素中的第一个同类型的元素
`:lastoftype`	选取兄弟元素中的最后一个同类型的元素
`:nthoftype(n)`	选取兄弟元素中的第n个同类型的元素
`:onlyoftype`	选取没有兄弟同类型元素的子元素，等价于`:nthoftype(1):nthlastoftype(1)`
`:empty`	选取没有子元素的元素
`:nthmatch(selector, n)`	选取匹配给定选择器的第n个元素
`:nthlastmatch(selector, n)`	选取匹配给定选择器的倒数第n个元素
`:is(selector), :matches(selector)`	选取匹配给定选择器的元素
`:not(selector)`	选取不匹配给定选择器的元素
`:has(selector)`	选取包含指定后代的元素
`:contains(text)`	选取包含指定文本的元素（注意：这个选择器已被废弃，不再推荐使用）

2. UI状态伪类选择器

UI状态伪类选择器主要用于选取具有特定UI状态的元素。

伪类选择器	描述
`:enabled`	选取可用的表单元素
`:disabled`	选取不可用的表单元素
`:checked`	选取被选中的复选框、单选框或选项元素
`:default`	选取默认被选中的复选框、单选框或选项元素
`:indeterminate`	选取不确定状态的复选框、单选框或选项元素
`:focus`	选取当前获得焦点的元素
`:hover`	选取鼠标悬停的元素
`:active`	选取被用户激活的元素
`:selection`	选取被用户选定的文本（注意：这个选择器已被废弃，不再推荐使用）

3. 动态伪类选择器

动态伪类选择器主要用于选取处于特定动态状态的元素。

伪类选择器	描述
`:link`	选取未访问过的链接
`:visited`	选取已访问过的链接
`:hover`	选取鼠标悬停的链接
`:active`	选取被用户激活的链接
`:target`	选取当前活动的锚点元素（点击后跳转到的页面内的目标元素）

4. 表单相关伪类选择器

表单相关伪类选择器主要用于选取与表单相关的特定元素。

以上就是一些常用的伪类选择器的归纳，希望对你有所帮助。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

评论(0)