伪类选择器汇总

伪类选择器汇总

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

在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

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
未希新媒体运营
上一篇 2024-03-28 19:53
下一篇 2024-03-28 19:54

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入