UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，根据表单元素的不同状态，定义不同的样式，来增强用户体验。
UI状态伪类选择器的特征：指定的样式只有在某种状态下才起作用
表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。
E:focused选择表单中获得焦点的元素3E:checked选择表单中被选中的radio或者checkbox元素3E:enabled选择表单中可用的元素3E:disabled选择表单中不可用（即被禁用）的元素3E:valid选择表单中填写的内容符合要求的元素3E:invalid选择表单中填写的内容不符合要求的元素，如非法的URL或E-Mail，或与 pattern 属性给出的模式不匹配3E:in-range选择表单中输入的数字在有效范围内的元素3E:out-of-range选择表单中输入的数字超出有效范围的元素3E:required选择表单中必填的元素3E:optional选择表单中允许使用required属性，且未指定为required的元素3E:read-only选择表单中状态为只读的元素3E:read-write选择表单中状态为非只读的元素3E:default选择表单中默认处于选取状态的单选框或复选框，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效3E:indeterminate选择器表单中一组单选框中没有任何一个单选框被选取时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定3
1、E:hover选择器
立即学习“前端免费学习笔记（深入）”；
用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
:hover{ CSS样式 }
我们可以在“”中添加元素的type属性。
例：
a { text-decoration: none; } a:link { font-size: 18px; border: 1px solid black; padding: 5px; margin-left: 10px; background: #ccc; color: black; } a:visited { background: #FFFF99; border: 1px solid red; color: red; } a:hover { background: #9c6ae1; border: 1px solid black; color: black; } 这是一个链接 这是另一个链接
运行结果如下图所示：
2、E:active选择器
:active：定义点击链接时的样式。
通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：
a { text-decoration: none; } a:link { font-size: 18px; border: 1px solid black; padding: 5px; margin-left: 10px; background: #ccc; color: black; } a:visited { background: #FFFF99; border: 1px solid red; color: red; } a:hover { background: #9c6ae1; border: 1px solid black; color: black; } a:active { background: #000; border: 1px solid black; color: white; } 这是一个链接 这是另一个链接
运行结果如下图所示：
3、E:link选择器
:link：定义普通或未访问链接的样式；
通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：
a { text-decoration: none; } a:link { font-size: 18px; border: 1px solid black; padding: 5px; margin-left: 10px; background: #ccc; color: black; } 这是一个链接 这是另一个链接
运行结果如下图所示：
4、E:visited选择器
:visited：定义已经访问过链接的样式；
通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：
a { text-decoration: none; } a:link { font-size: 18px; border: 1px solid black; padding: 5px; margin-left: 10px; background: #ccc; color: black; } a:visited { background: #FFFF99; border: 1px soild red; color: red; } 这是一个链接 这是另一个链接
运行结果如下图所示：
5、E:focus选择器
:focus：用来指定元素获得光标聚焦点使用的样式
示例代码如下：
选择器E:hover、E:active和E:focus input[type="text"]:hover{ background: green; } input[type="text"]:focus{ background: #ff6600; color: #fff; } input[type="text"]:active{ background: blue; } input[type="password"]:hover{ background: red; }选择器E:hover、E:active和E:focus
姓名：
密码：
6、E:enabled伪类选择器与E:disabled伪类选择器
1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
E:enabled伪类选择器与E:disabled伪类选择器 input[type="text"]:enabled{ background: green; color: #ffffff; } input[type="text"]:disabled{ background: #727272; }E:enabled伪类选择器与E:disabled伪类选择器
姓名：
学校：
7、E:read-only伪类选择器与E:read-write伪类选择器
1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
read-only伪类选择器与E:read-write伪类选择器 input[type="text"]:read-only{ background: #000; color: green; } input[type="text"]:read-write{ color: #ff6600; }read-only伪类选择器与E:read-write伪类选择器
姓名：
学校：
8、伪类选择器E:checked、E:default和indeterminate
1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
checked伪类选择器 input[type="checkbox"]:checked{ outline: 2px solid green; }checked伪类选择器
房屋状态： 水 电 天然气 宽带
默认的选择项
default伪类选择器 input[type="checkbox"]:default{ outline: 2px solid green; }default伪类选择器
房屋状态： 水 电 天然气 宽带
indeterminate伪类选择器 input[type="radio"]:indeterminate{ outline: 2px solid green; }indeterminate伪类选择器
性别： 男 女
9、伪类选择器E::selection
E:selection伪类选择器用来指定当元素处于选中状态时的样式。
伪类选择器E::selection ::selection{ background: green; color: #ffffff; } input[type="text"]::selection{ background: #ff6600; color: #ffffff; }伪类选择器E::selection
10、E:invalid伪类选择器与E:valid伪类选择器
1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
E:invalid伪类选择器与E:valid伪类选择器 input[type="email"]:invalid{ color: red; } input[type="email"]:valid{ color: green; }E:invalid伪类选择器与E:valid伪类选择器
11、E:required伪类选择器与E:optional伪类选择器
1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
E:required伪类选择器与E:optional伪类选择器 input[type="text"]:required{ background: red; color: #ffffff; } input[type="text"]:optional{ background: green; color: #ffffff; }E:required伪类选择器与E:optional伪类选择器
姓名：
学校：
12、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
E:in-range伪类选择器与E:out-of-range伪类选择器 input[type="number"]:in-range{ color: #ffffff; background: green; } input[type="number"]:out-of-range{ background: red; color: #ffffff; }E:in-range伪类选择器与E:out-of-range伪类选择器
各UI元素状态伪类选择器受浏览器的支持情况
E:hover√√√√√E:active√√√x√E:focus√√√√√E:enable√√√x√E:disable√√√x√E:read-only√x√xxE:read-write√x√xxE:checked√√√x√E:default√xxxxE:indeterminate√√x√√E:selection√√√x√
（学习视频分享：web前端入门）
以上就是一文详解css中的UI状态伪类选择器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1624477.html
微信扫一扫 
支付宝扫一扫 
