:in-range伪类仅对type="number"有效，需配合合法min/max值，空值默认视为in-range，非法输入不匹配任一伪类，不可替代JS验证。
:in-range 伪类只对 type="number" 有效
它不会响应 input[type="text"] 或带 pattern 的输入框，哪怕你写了 min 和 max 属性也没用——浏览器只在原生数值验证上下文中才触发 :in-range 和 :out-of-range。
常见错误现象：input[type="text"] 加了 min="1" max="100"，再写 input:in-range { color: green; }，样式完全不生效。
- 必须用
type="number"才能激活该伪类 -
min/max值需为合法数字字符串（如"0"、"-5.5"），不能是空或"auto" - 用户未输入时，
:in-range默认为 true（即“无输入”视为在范围内），这点常被忽略
:in-range 和 :out-of-range 是互斥但不覆盖所有状态
它们只反映当前值是否落在 min–max 闭区间内，不处理空值、非数字、NaN 等无效输入。比如用户输入 "abc"，此时既不匹配 :in-range，也不匹配 :out-of-range，而是回退到普通 input 样式。
使用场景：适合做「合法数值区间」的即时视觉反馈，但不能替代 JS 验证或表单提交校验。
立即学习“前端免费学习笔记（深入）”；
-
input:in-range→ 值为数字且 ≥min、≤max -
input:out-of-range→ 值为数字但超出范围（如105超过max="100"） - 空值、
" "、"--"、"12a"等均不属于任一伪类
样式优先级与 JS 干预的冲突点
如果 JS 动态设置 input.value 为一个超限数字（比如 el.value = "200"），浏览器会立即应用 :out-of-range，但若 JS 同时加了 el.style.borderColor = "red"，CSS 伪类样式可能被内联样式压制。
性能影响：伪类本身无渲染开销，但频繁输入触发重排+重绘时，配合复杂选择器（如 form input:in-range + label）可能轻微拖慢响应。
- 避免用
!important强行覆盖，改用更具体的选择器，例如.form-control input:in-range - 不要依赖伪类做无障碍反馈（屏幕阅读器不读取伪类状态），需配合
aria-invalid和aria-describedby - 移动端 Safari 对
:in-range支持稳定，但旧版 Android WebView 有兼容问题，建议降级 fallback 到 class 切换
实际可用的最小闭环示例
下面这段代码能在用户输入合法数字区间时变绿，超限时变红，空或非法输入保持灰色：
input[type="number"] {
color: #666;
}
input[type="number"]:in-range {
color: #28a745;
}
input[type="number"]:out-of-range {
color: #dc3545;
}
对应 HTML 必须严格配对：
<input type="number" min="0" max="100" step="1">
注意 step 不影响 :in-range 判定逻辑，但会影响用户可选值粒度；若设 step="any"，小数输入也合法。
容易被忽略的是：用户粘贴内容（如粘贴 "-10"）也会实时触发伪类切换，但粘贴非数字（如 "hello"）后，需要失焦或再次输入才会重新评估——这个时机差可能导致视觉反馈延迟半拍。
