:in-range仅在type为number/date/time/range且min/max均为合法值时生效；空值、非法格式不匹配任一伪类，需结合:invalid和js校验。
:in-range 不是万能的范围提示工具，它只在 min 和 max 都存在、且值为合法数字/日期时才生效；空值、字母、非法格式（如 "2026-13-01"）既不匹配 :in-range 也不匹配 :out-of-range —— 这是多数人调试失败的第一原因。
为什么写了 input:in-range 却没反应
常见错误不是选择器写错，而是 HTML 或值本身不满足触发条件：
-
type必须是"number"、"date"、"time"、"range"等原生支持范围的类型；type="text"完全无效 -
min和max属性必须同时存在，且值为可解析字符串（如min="0"，不能是min=""或min="auto"） - 初始
value若为空（value=""）、非法（value="abc"）或未聚焦，浏览器不会计算范围，两个伪类都处于“未激活”状态 -
step不影响:in-range判定，但会影响:valid；比如value="10.5"+step="1"仍算:in-range，但不算:valid
:in-range 和 :out-of-range 的真实匹配边界
它们只反映「当前 value 是否落在 [min, max] 闭区间内」，不是「是否有效」：
-
value="10"+min="10" max="20"→ 匹配:in-range（端点包含） -
value="20"+ 同上 → 也匹配:in-range -
value="abc"或value=""→ 两个伪类都不匹配（不是:out-of-range！） -
value="100"+min="10" max="20"→ 匹配:out-of-range -
type="range"几乎永远匹配:in-range，因为浏览器会强制截断 value 到范围内（range.value = 200实际变成"100"），所以对range用这两个伪类意义不大
实际可用的样式组合与兼容性注意点
纯 CSS 范围反馈需配合其他机制才能覆盖完整用户路径：
- 边框色是最稳妥的视觉反馈方式：
input[type="number"]:in-range { border-color: #4caf50; }，避免依赖背景色（某些浏览器默认样式会覆盖） - 不要单独依赖
:out-of-range做错误提示——它不捕获空值和非法输入，应叠加:invalid:not(:placeholder-shown)作降级 - Safari ≤15.4 对
:out-of-range有延迟或不触发问题，建议用 JS 监听input事件 +checkValidity()补充判断 - 无法用
transition直接过渡:in-range切换，需改用:valid/:invalid或 JS 控制 class - 服务端校验不可省略：伪类纯属 UI 提示，不影响提交行为，
min/max可被绕过
最易被忽略的一点：伪类状态无法通过 getComputedStyle() 读取，也不能用 JS 直接查询是否“当前在范围内”——你只能监听 input 或 change 事件，再手动比对 element.valueAsNumber 与 min/max 属性值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
