input:out-of-range未生效主因有三：未设min/max、type非number/range、css优先级被覆盖；它仅匹配合法但越界值，空值或非法字符归为:invalid；推荐用:user-invalid（chrome109+/safari16.4+）或js校验兜底。
input:out-of-range 样式为什么没生效
写了 input:out-of-range { border-color: red; } 却没反应，大概率是三个原因：没加 min 或 max 属性、type 不是 "number" 或 "range"、CSS 优先级被其他规则覆盖。浏览器只对带数值范围限制的元素触发该伪类——type="text" 完全不识别 :out-of-range，哪怕你写了 min="1" 也没用。
调试时直接在 DevTools 里手动改 value 为超限值（比如 min="0" max="100" 时设成 101），看元素上是否出现 :out-of-range 状态标记，比猜更可靠。
如何让越界提示立刻响应输入
:out-of-range 本身不响应实时输入——它只在值“合法但越界”时匹配，而用户输字母、空值、或删光内容时，多数浏览器会把它归为 :invalid 而非 :out-of-range。所以纯 CSS 方案必须搭配条件：
-
input:out-of-range:not(:valid)—— 更精准，排除空值干扰（空值不触发:out-of-range，但会触发:invalid） -
input:out-of-range:invalid—— 兼容稍好，但空值也会命中，可能误标 - 必须确保
input同时有min/max和required（否则空值不校验）
示例：input[type="number"]:out-of-range:not(:valid) { border: 2px solid #f44336; }
:user-invalid 是更贴近用户行为的替代方案
Chrome 109+ 和 Safari 16.4+ 支持 :user-invalid，它在用户**修改后失焦**或**提交表单时**才生效，行为更符合真实交互逻辑——比如用户输完 150 然后点别处，立刻标红；不像 :out-of-range 那样对空值、非法字符响应模糊。
用法简单：input:user-invalid { border-color: #f44336; }，但它不替代 JS 校验，只是视觉同步信号。移动端尤其推荐，因为 iOS 软键盘允许输字母，:out-of-range 完全不触发，而 :user-invalid 至少能在失焦时补上。
别指望 :out-of-range 拦住错误提交
它只是 CSS 伪类，不阻止表单提交，也不修正值。用户点提交按钮时，依然能发出去超限数据。业务校验必须靠 JS：form.addEventListener("submit", e => { if (!e.target.checkValidity()) e.preventDefault(); })，或更稳妥地调用 form.reportValidity() 触发原生提示。
最容易被忽略的是移动端兼容性：iOS 的 type="number" 键盘虽弹数字，但允许粘贴字母、长按输入符号，此时 :out-of-range 完全失效，必须用 input 事件监听 + checkValidity() 手动加 class 才能兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
