伪类选择器汇总
（图片来源网络，侵删）
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. 表单相关伪类选择器
表单相关伪类选择器主要用于选取与表单相关的特定元素。
| 伪类选择器 | 描述 |
:valid |
选取有效验证的表单元素 |
:invalid |
选取无效验证的表单元素 |
:required |
选取有”required”属性的表单元素 |
:optional |
选取没有”required”属性的表单元素 |
:readwrite |
选取可读写的表单元素 |
:readonly |
选取只读的表单元素 |
:readwriteplaintext |
选取可读写且无修饰的纯文本输入框 |
:readonlyplaintext |
选取只读且无修饰的纯文本输入框 |
:placeholdershown |
选取显示占位符的输入框（注意：这是一个实验性的选择器） |
以上就是一些常用的伪类选择器的归纳，希望对你有所帮助。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/401367.html
微信扫一扫