简介
:out-of-range 是一个伪类选择器，用于匹配那些超出指定范围的 <input> 元素。通常情况下，它应用于带有 min 和 max 属性的输入框，当输入值超出了这些限制时，该选择器将生效。
使用场景
这个选择器常用于表单验证，帮助用户了解其输入是否符合预期的范围。例如，在用户尝试提交一个包含日期或数字的表单时，可以使用此选择器来高亮显示不符合条件的输入字段。
示例
假设有一个输入框需要用户输入一个介于 1 到 100 之间的整数：
<input type="number" min="1" max="100" id="age-input">
我们可以使用 :out-of-range 来改变超出范围的输入框边框颜色：
input:out-of-range {
border-color: red;
}在这个例子中，如果用户输入了一个小于 1 或大于 100 的数字，输入框的边框颜色将会变成红色。
与其它选择器结合使用
:out-of-range 可以与其他选择器结合使用，以实现更复杂的样式效果。例如，可以将其与 :in-range 结合，为不同状态下的输入框提供不同的样式。
示例
我们可以在输入框处于有效范围内时显示绿色边框，在超出范围时显示红色边框：
input:in-range {
border-color: green;
}
input:out-of-range {
border-color: red;
}这使得用户可以直观地看到他们的输入是否有效。
浏览器兼容性
:out-of-range 是一个标准的选择器，并且大多数现代浏览器都支持这一特性，包括 Chrome、Firefox、Safari 和 Edge。不过，对于一些非常旧的浏览器版本可能不支持。
注意事项
尽管 :out-of-range 能够提供良好的用户体验，但在实际应用中仍需注意浏览器兼容性和用户的可访问性需求。确保为所有用户提供清晰的反馈和指导信息，以便他们能够正确地填写表单。
实际案例
假设你正在开发一个在线购物平台，用户需要输入他们的年龄以完成注册过程。为了确保数据的有效性，你可以利用 :out-of-range 来优化用户界面：
<form> <label for="age">请输入您的年龄：</label> <input type="number" min="18" max="99" id="age"> <button type="submit">注册</button> </form>
input:out-of-range {
border-color: red;
background-color: rgba(255, 0, 0, 0.1);
}这样，当用户输入的年龄不在 18 至 99 之间时，输入框会变为红色背景并带有红色边框，从而提醒用户输入无效。
通过上述内容，我们可以看到 :out-of-range 在前端开发中的重要作用，尤其是在增强用户体验和表单验证方面。
