定义与用法
:in-range 是一个 CSS 伪类选择器，用于选择那些其值位于指定范围内的表单元素。这个选择器通常应用于带有 min 和 max 属性的输入元素（如 <input type="number"> 或 <input type="range">），以根据其值是否在指定范围内来改变样式。
示例
HTML 结构
<form>
<label for="age">年龄：</label>
<input id="age" type="number" min="0" max="150">
</form>CSS 样式
// www.javascriptcn.com code example
/* 当输入的年龄在0到150之间时应用此样式 */
#age:in-range {
background-color: lightgreen;
}
/* 当输入的年龄不在0到150之间时应用此样式 */
#age:out-of-range {
background-color: pink;
}在这个例子中，当用户输入的年龄值在 0 到 150 之间时，输入框的背景颜色会变为浅绿色。如果输入的值超出这个范围，则背景色变为粉色。
兼容性
:in-range 伪类选择器在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge 等主流浏览器。然而，在使用时，仍需注意检查具体版本的兼容性情况。
应用场景
:in-range 伪类非常适合用于创建动态的用户界面反馈机制。例如，在表单验证过程中，可以根据用户的输入即时调整界面样式，为用户提供直观的反馈，帮助他们快速了解自己的输入是否符合要求。
总结
:in-range 伪类选择器提供了一种简单而有效的方式来根据输入值的范围改变元素的样式。它不仅可以提升用户体验，还可以作为前端开发者工具箱中的一个重要工具。通过合理运用，可以有效地增强 Web 应用程序的交互性和可用性。