:in-range 对 <input type="range"> 恒为 true，因浏览器强制截断值至 [min, max] 内，无法区分正常/超限状态；仅 type="number" 可用该伪类实现范围反馈，range 的动态样式需 JS + class 控制。
:in-range 对 <input type="range"> 几乎无效，不能用来做进度条范围反馈。 它在 range 上默认始终匹配（浏览器强制截断 value 到 [min, max] 内），所以样式无法区分“正常”和“超限”状态——这不是 bug，是规范行为。
为什么 input[type="range"]:in-range 总是生效
浏览器对 range 输入框有底层约束：无论 JS 赋什么值（比如 el.value = "200"），只要超出 min/max，它会立即静默修正为边界值，并保持元素处于“合法输入”状态。结果就是：
-
:in-range恒为 true，:out-of-range永远不触发 - 你写
input:in-range { background: green; }，整个滑块永远绿着 - 无法用它实现“超限变红”“临界高亮”等视觉反馈
真正能用 :in-range 的场景只有 type="number"
如果你需要基于数值范围的纯 CSS 反馈，唯一可靠路径是换用 <input type="number">，并确保：
- 必须同时设置
min和max属性，且值为可解析数字字符串（如min="0"，不能是min=""） - 初始
value为空时，:in-range默认为 true（这点常被误认为“没生效”） - 用户输入
"15"且min="10" max="20"→ 触发:in-range - 用户输入
"abc"或留空 → 两个伪类都不匹配，回退到基础样式
想给 range 做动态范围反馈？得靠 JS + class
要让滑块在接近 min/max 时变色、或超出时显示警告，必须放弃伪类，改用 JS 监听并手动控制 class：
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，读取el.valueAsNumber - 对比
el.min和el.max，计算是否接近边界（比如valueAsNumber ） - 用
el.classList.toggle("near-min", isNearMin)控制样式 - 避免直接设
el.style，否则会压过 CSS 中的:in-range规则（即使它没用）
最易被忽略的一点：:in-range 状态无法用 getComputedStyle() 读取，也不能用 matches() 查询——你只能靠 JS 手动比对数值。
