E:in-range伪类选择器与E:out-of-range伪类选择器-优快云博客

本文介绍如何使用E:in-range与E:out-of-range伪类选择器，通过实例展示了当输入值位于预设范围内时应用不同样式的技巧。示例通过限定数值输入控件的有效范围，并设置不同背景颜色来区分有效与无效输入。

E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
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伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。
代码清单19-27 E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
　　<title>http://www.manongjc.com/article/1339.html</title>
　　<style type="text/css">
　　input[type="number"]:in-range{
　　background-color: white;
　　}
　　input[type="number"]:out-of-range{
　　background-color: red;
　　}
　　</style>
　　</head>
　　<body>
　　<form>
    http://www.manongjc.com/article/1340.html
　　请输入1到100之内的数值：<input type=number min=0 max=100 >
　　</form>
　　</body>
　　</html>