类选择器。
input:required ：选择必填表单域；
input:focus:invalid ：选择当前聚焦的且含有非法输入值的表单域；
input:focus:valid ：选择当前聚焦的且含有合法输入值的表单域。
我们使用上面的伪类选择器再编写三条新规则：
input:required {
border: 1px solid rgba(253, 8, 8, 0.29);
}
input:focus:invalid {
background: url('../img/cross.png') no-repeat right;
padding-right: 3px;
}
input:focus:valid {
background: url('../img/tick.png') no-repeat right;
padding-right: 3px;
}
第一个规则给必填表单域加了一点红色边框。当用户输入时，如果所输入的值不符合规
定格式，则第二个样式会给当前的输入框加上一个红色叉号；如果输入值符合格式，则
第三个样式会给其加上一个绿色对号。
下面的截图显示了浏览器（Firefox v9）加载完页面的效果：
如果我们聚焦（点击）到一个必填输入框，右侧就会出现一个红色叉号（因为我们还没
输入有效的值） ：
如果我们输入一个有效的值，红色的叉号就变成了绿色的对号：使用这些新的 CSS3伪类选择器可以制作出优美的、 易于实现的增强效果， 可以大大提升用户填写表单的用户体验。