:in-range伪类仅在type="number"、min与max同时设置且value为合法数字时生效；缺一条件则不触发，它仅判断valueAsNumber是否在[min,max]闭区间内，不依赖step或格式校验。
:in-range 伪类不会自动生效，它只在满足三个硬性条件时才触发样式：type="number"、同时设置 min 和 max、且 value 是合法数字（非空、非 NaN）。
为什么 :in-range 样式不显示
浏览器根本没进入范围判定流程，不是选择器写错，而是基础条件缺失：
-
type不是"number"——type="text"即使写了min="0" max="10"也完全无效 -
min和max缺一个（比如只设max="100"），伪类直接不激活 -
value为空（value=""）或非法（value="abc"），既不匹配:in-range也不匹配:out-of-range，回退到普通样式
:in-range 的边界判定逻辑
它只做一件事：判断 input.valueAsNumber 是否落在 [min, max] 闭区间内。不依赖 step、不校验格式、不影响表单提交行为：
-
value="10"+min="10" max="20"→ 匹配:in-range（端点包含） -
value="20.0"+ 同上 → 仍匹配:in-range -
value="10.5"+step="1"→ 仍匹配:in-range（step只影响:valid）
JS 赋值后 :in-range 状态卡住怎么办
直接 input.value = "150" 不会触发校验流程，伪类状态不会更新：
- 用
input.checkValidity()：仅刷新状态，不弹提示 - 用
input.reportValidity()：会弹原生气泡，适合提交前校验 - 更贴近用户行为的做法：
input.dispatchEvent(new Event('input', { bubbles: true }))，模拟真实输入事件 - 注意：
getComputedStyle(input)无法读取伪类状态，也不能用 JS 直接查询“是否在范围内”——只能监听input事件后手动比对input.valueAsNumber与min/max
移动端 Safari ≤15.4 对 :out-of-range 有延迟或不触发问题，必须用 JS 补充判断；另外，伪类状态无法被 JS 读取，也不能替代实际校验逻辑——它只是视觉反馈层，不是验证层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
