:in-range 仅在 type="number" 且 min 和 max 同时作为 html 属性存在、value 可解析为数字时生效；否则不触发样式，常见原因包括类型不符、属性缺失或值非法。
:in-range 只在 type="number" 且 min 和 max 同时存在、值可解析为数字时才真正生效；其他情况（空值、type="text"、JS 动态设 min/max）样式不会触发。
为什么写了 :in-range 却没变色？
不是选择器写错，而是浏览器压根没进入范围判定流程。最常见三类原因：
-
type不是"number"——type="text"加min/max完全无效 -
min和max没同时作为 HTML 属性写在标签里 —— 缺一个都不行，哪怕min="0"max="999999"都得明写 -
value为空（value=""）或非法（value="abc"）—— 此时既不匹配:in-range，也不匹配:out-of-range，直接回退到基础样式
input[type="number"] 的 :in-range 边界怎么算？
它只做一件事：判断当前 value 是否落在 [min, max] 闭区间内。和格式、step、是否必填都无关：
-
value="10"+min="10"max="20"→ 匹配:in-range -
value="20"+ 同上 → 仍匹配:in-range（端点包含） -
value="10.5"+step="1"→ 仍匹配:in-range（step不影响范围判断） -
value="abc"或value=""→ 两个伪类都不匹配
JS 修改 value 后样式不更新怎么办？
直接赋值 input.value = "15" 不会触发伪类重计算，因为浏览器校验状态没被通知：
- 必须手动派发事件：
input.dispatchEvent(new Event('input', { bubbles: true })) - 或调用校验方法：
input.checkValidity()（仅刷新状态）或input.reportValidity()（弹原生提示） -
getComputedStyle(input).getPropertyValue('border-color')无法读取:in-range状态——它不可查询，只能监听事件后手动比对input.valueAsNumber与min/max
type="range" 能不能用 :in-range 做范围反馈？
不能。浏览器对 input[type="range"] 有底层约束：无论 JS 赋什么值（比如 el.value = "200"），只要超出 min/max，它会立即静默修正为边界值，并保持元素处于“合法输入”状态。结果就是：:in-range 恒为 true，:out-of-range 永远不触发。
想给滑块做动态范围反馈（如接近边界变色、超限警告），必须放弃伪类，改用 JS 监听 input 事件，读取 el.valueAsNumber，对比 el.min 和 el.max，再手动控制 class。
最易被忽略的一点：伪类状态无法通过 JS 查询，也不能用 getComputedStyle 读取——你只能靠事件监听 + 手动数值比对来实现逻辑闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
