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

16.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种选择器被浏览器的支持情况如表16-1所示。

表16-1　各UI元素状态伪类选择器受浏览器的支持情况

16.4.1　伪类选择器E:hover、E:active和E:focus

E:hover伪类选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式，使用方法如下所示：

<元素>:hover{

// 指定样式

}

可以在“<元素>”中添加元素的type属性，使用方法类似如下：

input[type="text"]: hover{

    // 指定的样式

}

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

E:active伪类选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。

E:focus伪类选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。

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

代码清单16-18　伪类选择器E:hover、E:active和E:focus的使用示例

对于示例中的任意一个文本框控件来说，这段代码的运行结果都可能有如下4种情况：

1）没有对文本框控件进行任何操作时的页面显示如图16-24所示（文本框背景色为白色）。

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

图16-24　代码清单16-18的运行结果（没有对文本框控件进行任何操作时）    图16-25　代码清单16-18的运行结果（鼠标指针移动到姓名文本框控件上时）

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

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

图16-26　代码清单16-18的运行结果（姓名文本框控件被激活时）      图16-27　代码清单16-18的运行结果（姓名文本框控件获得光标焦点时）