伪类选择器汇总
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
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复