伪类选择器汇总
伪类选择器汇总
创新互联公司主要从事成都做网站、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务月湖,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
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 | 选取显示占位符的输入框（注意：这是一个实验性的选择器） |
以上就是一些常用的伪类选择器的归纳，希望对你有所帮助。
本文题目：伪类选择器汇总
文章网址：http://zsjierui.cn/article/cdeghdh.html