伪类选择器汇总
(图片来源网络,侵删)
在CSS中,伪类选择器是用来选取DOM树之外的元素,或者是不能被常规CSS选择器选中的元素,这些元素通常是由浏览器的默认行为创建的,例如链接的:hover状态,或者是表单的:focus状态。
以下是一些常用的伪类选择器:
1. 动态伪类
动态伪类用于在用户与页面交互时改变某些元素的样式。
伪类 | 描述 |
:hover |
当鼠标指针悬停在元素上时 |
:active |
当元素被用户激活(被点击)时 |
:focus |
当元素获取焦点(输入字段被点击)时 |
:visited |
当链接已被访问时 |
:link |
当链接未被访问时 |
2. 结构性伪类
结构性伪类主要用于样式化文档结构的一部分。
伪类 | 描述 |
:firstchild |
选取其父元素的首个子元素 |
:lastchild |
选取其父元素的最后一个子元素 |
:nthchild(n) |
选取其父元素的第n个子元素 |
:firstoftype |
选取其父元素的首个特定类型的子元素 |
:lastoftype |
选取其父元素的最后一个特定类型的子元素 |
:nthoftype(n) |
选取其父元素的第n个特定类型的子元素 |
:onlychild |
选取唯一子元素 |
:onlyoftype |
选取唯一的特定类型的子元素 |
3. 表单相关的伪类
表单相关的伪类主要用于处理表单元素的各种状态。
伪类 | 描述 |
:enabled |
选取可用的表单元素 |
:disabled |
选取不可用的表单元素 |
:checked |
选取被选中的复选框或单选按钮 |
:default |
选取默认的表单元素 |
:required |
选取必填的表单元素 |
:optional |
选取非必填的表单元素 |
:valid |
选取有效输入的表单元素 |
:invalid |
选取无效输入的表单元素 |
:inrange |
选取在指定范围内的数字输入的表单元素 |
:outofrange |
选取超出指定范围的数字输入的表单元素 |
:readwrite |
选取可读写的表单元素 |
:readonly |
选取只读的表单元素 |
:selection |
选取用户当前选择的文本 |
:placeholdershown |
选取显示占位符的表单元素 |
以上就是CSS中常见的一些伪类选择器的归纳。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)