:in-range是CSS伪类，仅作用于type="number"、"date"或"time"且同时设置合法min/max属性的input元素，匹配值在[min, max]闭区间内的状态；空值或非法输入不触发。
什么是 :in-range 伪类，它能用在哪些元素上
:in-range 是 CSS 原生伪类，只对具有范围限制的表单控件生效，比如设置了 min 和 max 属性的 、、。它不会作用于 text、email 或没设上下限的 number 输入框。
- 必须同时存在
min和max（哪怕值相等），否则浏览器不触发该状态 - 输入为空时，
:in-range不匹配（空值既不算“在范围内”，也不算“越界”） - 用户输入非数字（如字母）时，多数浏览器视为无效值，
:in-range同样不匹配
:in-range 和 :out-of-range 的边界行为怎么判断
边界值是否算“在范围内”，取决于浏览器对 HTML 规范的实现：所有主流浏览器都把 min 和 max 视为闭区间（即包含端点）。也就是说，当用户输入等于 min 或 max 的值时，:in-range 会生效。
-
输入10→ 匹配:in-range
输入20→ 匹配:in-range
输入9.999或20.001→ 匹配:out-of-range - 注意浮点精度：如果
min="0.1"，输入0.10000000000000001仍可能被判定为 in-range（浏览器做数值比较，不是字符串比对）
为什么加了样式却没反应？常见失效原因
样式没生效，大概率是以下某一个环节断了：
- 忘记给
input设置type="number"，写成type="text"就完全不支持该伪类 - 只写了
min或只写了max，缺少任一属性，:in-range永远不会激活 - 使用了 JS 动态设置
min/max，但未触发浏览器的“约束验证状态重计算”（部分旧版 Safari 需要input.dispatchEvent(new Event('input'))补救） - 样式优先级被覆盖：比如用了
input:in-range { color: red; }，但更早定义的input { color: blue; }权重更高，得加!important或提高选择器 specificity
配合 JavaScript 获取实时范围状态更可靠
CSS 伪类只反映当前渲染状态，无法监听变化或做逻辑分支。真要响应“刚进入范围”或“刚越界”，得靠 JS：
const input = document.querySelector('input[type="number"]');
input.addEventListener('input', () => {
// 注意：validity.rangeUnderflow / rangeOverflow 是布尔值
// 但 inRange 需要自己算：input.valueAsNumber >= min && = min && val input.classList.toggle('in-range', inRange);
input.classList.toggle('out-of-range', !inRange && !isNaN(val));
});
这个手动判断比依赖伪类更可控，尤其在需要兼容 IE 或处理空字符串、科学计数法（如 1e2）时。伪类适合纯视觉反馈，复杂交互别只靠它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
