这篇文章主要介绍了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选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

立即学习“前端免费学习笔记（深入）”；

例如：

nbsp;html>                                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选择器被用来指定当元素处于不可用状态时的样式。
 

例如：

nbsp;html>                                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选择器被用来指定当元素处于非只读状态时的样式。

nbsp;html>                                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选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

nbsp;html>                                input[type="checkbox"]:checked{              outline: 2px solid green;          }            
checked伪类选择器
  

登录后复制    

 默认的选择项

nbsp;html>                                input[type="checkbox"]:default{              outline: 2px solid green;          }            
default伪类选择器
  

登录后复制    

indeterminate伪类选择器
nbsp;html>                                input[type="radio"]:indeterminate{              outline: 2px solid green;          }            
indeterminate伪类选择器
  

登录后复制    

5、伪类选择器E::selection
 1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。 

例如

nbsp;html>                                ::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等属性所指定的检查或元素内容符合元素规定的格式时的样式。 

例如

nbsp;html>                                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元素的样式。

nbsp;html>                            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伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。 

例如

nbsp;html>                                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伪类选择器
      

登录后复制

以上就是css3中UI元素状态伪类选择器实例详解的详细内容，更多请关注【创想鸟】其它相关文章！