:out-of-range仅对合法数字且越界值生效，type非number/date/time、缺min/max、输入非法字符均不触发；需用border+背景+阴影强化提示，Safari≤15.4不支持。
直接说结论：:out-of-range 不能高亮“非法输入”，它只高亮“合法但越界”的数值；输字母、空值、没设 min/max 都不会触发它——写完没反应，八成是这三个地方错了。
为什么 :out-of-range 样式写了却完全不生效
这不是选择器写法问题，而是浏览器压根没启动范围判定逻辑：
-
type不是"number"、"date"或"time"——type="text"加min="0"完全无效 -
min和max没有**同时存在**，或值非法（如min=""、min="auto"、min="10px"） - 用户输入的是
"abc"、""、"12a"等非可解析数字——此时走的是:invalid，不是:out-of-range
调试最快方式：打开 DevTools → Elements 面板 → 手动把 value 改成明确越界的数字（如 value="200"），再看元素是否被标记为 :out-of-range 状态。
怎样写出真正起作用的 :out-of-range 样式
单改 border-color 在表单里几乎看不见，必须组合强化反馈：
- 边框 + 背景 + 阴影三件套：
border-color: #e53e3e+background-color: #fff5f5+box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2) - 聚焦态别丢：
input:out-of-range:focus下重置outline（比如outline: 2px solid #e53e3e），否则键盘用户无法感知 - 提示文案别塞
input::after（不支持），改用相邻兄弟：#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }，且#age-hint不能是display: none
JS 赋值后 :out-of-range 不更新怎么办
直接写 input.value = "150" 不会触发校验流程，伪类状态卡住不动：
- 手动派发事件：
input.dispatchEvent(new Event('input', { bubbles: true })) - 或调用校验接口：
input.checkValidity()（仅刷新状态，不弹提示） - 注意：
getComputedStyle(input).content读不到伪类状态，element.matches(':out-of-range')在多数浏览器中返回false即使样式已生效——它纯属渲染层信号，不暴露给 JS
真要程序化判断，只能自己算：input.valueAsNumber parseFloat(input.max)。
:out-of-range 必须和 :invalid 分开用
混在一起写样式，大概率漏提示或误导用户：
-
:out-of-range只匹配“值是合法数字，且明确落在[min, max]外”（如min="1"max="10"，输入15） -
:invalid匹配所有异常：空值、"abc"、越界、setCustomValidity("xxx") - 推荐写法：
input:invalid:not(:out-of-range)处理格式错误，input:out-of-range单独处理越界值
真正容易被忽略的点是：Safari ≤15.4 完全不支持 :out-of-range，iOS 软键盘还可能允许粘贴字母——这时越界根本不会触发，:invalid 才是你最后的防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
