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伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。