共计 755 个字符，预计需要花费 2 分钟才能阅读完成。
CSS :valid伪类选择器用于匹配指定类型的取值有效的 <input> 元素。
例如一个 email 输入框元素（<input type=”email”>），如果这个输入框中的值为有效的 email 地址，那么它就可以被 :valid 伪类选择器匹配。
当一个数值类型的输入框元素（<input type=”number”>）指定了最大数值（max）和最小数值（min）时，如果填入的数值在这个范围之内，那么它可以被 :valid 伪类选择器匹配，也可以被 :in-range 伪类选择器匹配。如果在样式表中 :in-range 的规则在 :valid 之后，那么后者设置的样式将被 :in-range 设置的样式覆盖。
示例代码
input[type="number"]:valid {background-color: lightgreen;}
input:valid {box-shadow: 0 0 3px 5px rgba(0, 200, 0, .2);
}在线演示
输入数值时有效，输入字母时无效。如果输入的数值在 1 -10 之间也可以被 :in-range 匹配。:in-range选择器的样式将会覆盖 :valid 的样式。你可以在下面输入一些数字看看效果。
这是一个 email 地址输入框。你输入正确的 email 地址时输入框为绿色，不正确时，输入框为红色。
下面的输入框也是一个 email 输入框，但是它带有 required 属性，所以留空时显示为红色。
下面的输入框是一个 URL 地址输入框。
浏览器支持
支持 :valid 伪类选择器的浏览器包括：Chrome10+, Firefox4+, Safari5+, Opera10+, Internet Explorer 10+ 以及 iOS。
