《HTML 5与CSS 3权威指南 》 （第2版·下册）——第19章 19.4 UI元素状态伪类选择器

19.4 UI元素状态伪类选择器

在CSS 3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。

这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。

在CSS 3中，共有17种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E: indeterminate、E::selection、E:invalid、E:valid、E:required、E:optional、E:in-range，以及out-of-range。

到目前为止，这17种选择器被浏览器的支持情况如表19-1所示。

19.4.1 选择器：E:hover、E:active和E:focus
E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式，使用方法如下所示：
<元素>:hover{
//指定样式
}
可以在“<元素>”中添加元素的type属性，使用方法类似如下：
input[type="text"]: hover{

//指定的样式

}

另外，所有UI元素状态伪类选择器的使用方法均与此类似，故后面不再赘述。

q E:active选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
q E:focus选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。

代码清单19-18是使用了这3个选择器的综合示例，该示例中有两个文本框控件，使用这3个选择器来指定当鼠标指针移动到文本框控件上时、文本框控件被激活时，以及光标焦点落在文本框之内时的样式。

对于示例中的任意一个文本框控件来说，这段代码的运行结果都可能有如下4种情况：
1) 没有对文本框控件进行任何操作时的页面显示如图19-24所示（文本框背景色为白色）。

2) 鼠标指针移动到某一个文本框控件上时的页面显示如图19-25所示（文本框背景色为绿色）。

3) 文本框控件被激活时的页面显示如图19-26所示（文本框背景色为黄色）。

4) 文本框控件获得光标焦点后的页面显示如图19-27所示（文本框背景色为浅蓝色）。