这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！
浏览器兼容性：
E:hover 支持firefox、safari、Opera、ie8、chrome ————
E:active 支持firefox、safari、Opera、chrome 不支持ie8
E:focus 支持firefox、safari、Opera、ie8、chrome ————-
E:enabled 支持firefox、safari、Opera、chrome 不支持ie8
E:disabled 支持firefox、safari、Opera、chrome 不支持ie8
E:read-only 支持firefox、Opera 不支持ie8、safari、chrome
E:read-write 支持firefox、Opera 不支持ie8、safari、chrome
E:checked 支持firefox、safari、Opera、chrome 不支持ie8
E::selection 支持firefox、safari、Opera、chrome 不支持ie8
E:default 只支持firefox ————
E:indeterminate 只支持chrome ————
E:invalid 支持firefox、safari、Opera、chrome 不支持ie8
E:valid 支持firefox、safari、Opera、chrome 不支持ie8
E:required 支持firefox、safari、Opera、chrome 不支持ie8
E:optional 支持firefox、safari、Opera、chrome 不支持ie8
E:in-range 支持firefox、safari、Opera、chrome 不支持ie8
E:out-of-rang 支持firefox、safari、Opera、chrome 不支持ie8
下面就其使用做详细的说明;
1、选择器E:hover、E:active和E:focus
1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
:hover{
CSS样式
}
我们可以在“”中添加元素的type属性。
例：
input[type=”text”]:hover{
CSS样式
}
2)、E:active选择器被用来指定元素被激活时使用的样式
3)、E: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
姓名：
密码：
2、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伪类选择器
姓名：
学校：
3、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伪类选择器
姓名：
学校：
4、伪类选择器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伪类选择器
indeterminate伪类选择器 input[type="radio"]:indeterminate{ outline: 2px solid green; }indeterminate伪类选择器
性别： 男 女
5、伪类选择器E::selection
1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
例如
伪类选择器E::selection ::selection{ background: green; color: #ffffff; } input[type="text"]::selection{ background: #ff6600; color: #ffffff; }伪类选择器E::selection
今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！
6、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伪类选择器
7、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伪类选择器
姓名：
学校：
8、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伪类选择器
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
对于css中使用rgba和opacity设置透明度的区别分析
以上就是关于css3的UI元素状态伪类选择器的分析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610133.html
微信扫一扫 
支付宝扫一扫 
