:in-range 伪类仅在 type="number" 且 min/max 作为 html 属性显式设置、value 为合法数字字符串并落在闭区间内时生效；动态赋值或非法值（如空、含空格/单位）均不触发，移动端兼容性差，不可替代 js 校验。
:in-range 不能限制输入，只能提供视觉提示；它只在 input[type="number"] 同时设置了 min 和 max 属性、且用户输入了合法数字值时才生效。
为什么 :in-range 样式不触发？
根本原因不是 CSS 写错，而是 HTML 条件未满足：
-
type必须是"number"（"range"或"date"也支持，但行为不同） -
min和max必须作为 HTML 属性显式写出，例如min="0" max="100"；用 JS 动态赋值el.min = "0"不会触发状态更新 - 初始
value为空（value=""）或非法（如value="abc"）时，:in-range和:out-of-range都不匹配——此时元素处于“未校验”状态，不是“越界” -
value必须能被解析为数字：比如value=" 5 "（带空格）或value="5px"会被视为非法，伪类不激活
如何让 :in-range 真正起作用？
必须保证 HTML 结构和值的合法性，再叠加合理样式：
- 写法示例：
<input type="number" min="10" max="99" value="50">—— 注意value是数字字符串，且落在闭区间内 - 端点包含：当
value="10"或value="99"时，仍匹配:in-range - 推荐用边框色反馈，最稳定：
input[type="number"]:in-range { border-color: #4CAF50; } - 避免仅靠背景色：某些浏览器默认样式（如 Chrome 的聚焦高亮）会覆盖它
- 不要和
:invalid冲突：若同时设了required，空值时走:invalid而非:in-range，需分开处理
:in-range 在移动端和旧浏览器的坑
兼容性看似好，但实际表现差异大：
- iOS Safari 直到 15.4 才完整支持
:out-of-range，旧版可能完全忽略该伪类；:in-range虽较早支持，但输入过程中状态更新有延迟 - 部分 Android WebView（如旧版 Chrome WebView）对这两个伪类无响应，
getComputedStyle(el)无法读取其状态，el.matches(':in-range')返回false即使视觉已生效 -
input[type="range"]永远匹配:in-range—— 因浏览器强制截断值到[min, max]内，无法用于越界反馈 - 无法用
transition平滑过渡:in-range切换；CSS 变化是离散的，建议改用 JS 控制 class + transition
真正可靠的范围反馈，始终要靠监听 input 事件 + 手动比对 el.valueAsNumber 与 el.min/el.max；:in-range 只是轻量 UI 辅助，别让它承担校验责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
