伪类选择器汇总
(图片来源网络,侵删)
在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中常见的一些伪类选择器的归纳。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/401151.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复