:out-of-range未生效通常因三个条件未同时满足：type不支持范围校验、未设置min/max、value非法；它仅在合法数值越界时触发，与:invalid分工明确，移动端需JS补位。
为什么写了:out-of-range却没反应
几乎总是因为三个硬性条件没同时满足：type不是"number"/"date"/"time"等支持范围的类型；没显式写min或max属性（哪怕只写一个）；当前value不是浏览器能解析的合法值（比如输入"abc"或空字符串，此时走的是:invalid）。调试时直接在 DevTools 里手动改value为超限数字（如min="10"时设value="5"），看元素上是否出现:out-of-range状态标记，比猜更可靠。
input[type="number"]必须同时设min和max才能用:in-range
:in-range不会在只有min或只有max时激活——它要求两个边界都存在且可解析。例如<input type="number" min="0">，哪怕用户输"-1"，也不会匹配:in-range或:out-of-range，而是归为:invalid。另外，初始value=""时，两个伪类都不生效；必须有合法值参与比较，浏览器才开始计算范围。
别把:out-of-range和:invalid混着用
它们触发逻辑完全不同，强行合并样式容易误标或漏标：
-
:out-of-range只认“合法数字但越界”，比如min="18" max="65"时输入"70" -
:invalid覆盖所有校验失败：空值、字母、越界、required未填、setCustomValidity()报错等 - 推荐分层处理：
input:invalid:not(:out-of-range)处理格式错误，input:out-of-range单独标红越界值 - 空值不触发
:out-of-range，但会触发:invalid，所以required属性不能省
Safari 和移动端必须用 JS 补位
iOS 软键盘对type="number"的支持不可靠：允许粘贴字母、长按输入符号，此时value变成非法字符串，:out-of-range完全失效。Safari ≤15.4 对这两个伪类支持延迟或不触发。解决方案是监听input事件，实时调用el.checkValidity()并手动加class（如is-out-of-range），再配合setCustomValidity()控制原生提示时机。纯 CSS 方案在真实移动端场景下基本不可靠。
立即学习“前端免费学习笔记（深入）”；
