CSS3--UI元素状态伪类选择器

Part I 这种选择器的共同特征：
指定的样式只有当元素处于某种状态时才起作用，在默认状态下不起作用
CSS3中共有多种UI元素状态伪类选择器：

E:hover | E:active | E:focus | E:enable | E:disable
E:read-only | E:read-write | E:checked | E:default
E:indeterminate | E::selection | E:valid | E:invalid
E:required | E:optional | E:in-range

---

Part II 使用方法：（见例）

---

Part III 详细说明：

1. E:hover 鼠标指针移动到某个文本框控件上的样式；

2. E:active 元素被激活(鼠标在元素上按下还没有松开)时使用的样式；

3. E:focus 元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用；

4. E:enable 指定当元素处于可用状态时的样式；

5. E:disable 指定当元素处于不可用状态时的样式；

6. E:read-only 指定当元素处于只读状态时的样式；

7. E:read-write 指定当元素处于非只读状态时的样式；

注：在FF下要写成 -moz-read-only 或者 -moz-read-write

        例：

8.E:checked 指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)；

9.E:default 指定当页面打开时默认处于选区状态的radio或checkbox控件的样式；

10.E:indeterminate 指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消

11.E::selection 指定当元素处于选中状态时的样式；

12.E:valid伪类选择器用来指定，当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。

13.E:invalid伪类选择器用来指定，当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。

代码清单19-25为一个E:invalid伪类选择器与E:valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素，当元素中没有被填入内容时元素背景色为红色，当元素中填入内容后元素背景色变为白色。

 代码清单19-25 E:invalid伪类选择器与E:valid伪类选择器的使用示例
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
 
 
 
 
 
 

 
请输入任意文字：
 
 
 
 
 

14.E:required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。
15.E:optional伪类选择器用来指定允许使用required属性，且未指定required属性的input元素、select元素以及textarea元素的样式。

代码清单19-26为一个E:required伪类选择器与E:optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框，并且对用于输入姓名的文本框指定了required属性，不对用于输入住址的文本框指定required属性。同时通过E:required伪类选择器指定用于输入姓名的文本框边框为红色，宽度为3px,通过E:optional伪类选择器指定用于输入住址的文本框边框为黑色，宽度为1px。

 代码清单19-26 E:required伪类选择器与E:optional伪类选择器的使用示例
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
 
 
 
 input[type="text"]:required{
 border-color:red;
 border-width:3px;
 }
 input[type="text"]:optional{
 border-color:black;
 border-width:1px;
 }
 
 
 
 

 姓名：

 住址：
 
 
 
 

16.E:in-range选择器用于标签的值在指定区间值时显示的样式。

以上大部分引用
http://www.cnblogs.com/ccqqccqqqq/archive/2012/02/27/2370194.html