伪类选择器汇总

伪类选择器汇总伪类选择器汇总(图片来源网络,侵删)

在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中常见的一些伪类选择器的归纳。

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