《HTML 5与CSS 3权威指南（第3版·下册）》——19.4.5 E::selection伪类选择器

19.4.5 E::selection伪类选择器

E::selection伪类选择器用来指定当元素处于选中状态时的样式。
代码清单19-24为一个E::selection伪类选择器的使用示例，在该示例中分别给出了一个p元素，一个文本框控件以及一个表格。当p元素处于选中状态时，被选中文字变为红色；当文本框控件处于选中状态时，被选中文字变为灰色；当表格处于选中状态时，被选中文字变为绿色。

这段代码的运行结果如图19-36所示：

19.4.6 E:invalid伪类选择器与E:valid伪类选择器

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

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

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

19.4.7 E:required伪类选择器与E:optional伪类选择器

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

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

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

19.4.8 E:in-range伪类选择器与E:out-of-range伪类选择器

q E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。

q E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。

代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件(type属性值为number的input元素)，通过min属性值与max属性值限定元素内的有效输入数值为从1到100，通过E:in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色，通过E:out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。