:out-of-range伪类仅在input显式声明min/max属性、type为number/date/time/range等原生支持类型、值格式正确且解析有效时触发；动态设置或无效值均不生效，且存在浏览器兼容性与样式覆盖问题。
没写min或max属性，伪类根本不会触发
浏览器只在 input 元素**显式声明了 min 或 max 属性**时才启用范围校验逻辑。哪怕只写一个，比如 min="0"，:out-of-range 才可能匹配；如果 HTML 里完全没这俩属性，无论用户输多少，伪类永远不生效。
常见误操作包括：
- 把
min/max当成 JS 变量用setAttribute动态加——浏览器不认，必须是初始 HTML 属性或通过element.min = "0"同步设置 DOM 属性（不是 property） - 写了
min=""、min="auto"或带单位如min="10px"——这些值解析失败，伪类直接跳过 - 日期输入用了
min="2026/01/01"（斜杠分隔）——必须是YYYY-MM-DD格式，否则无效
type 不是原生支持范围的类型
:out-of-range 只对 type="number"、type="date"、type="time"、type="range" 等少数几个类型有效。哪怕你给 type="text" 加了 min="1"，浏览器也完全无视——它压根不走范围校验流程。
尤其注意：
-
type="number"输入"abc"或空字符串时，value是空串，此时既不匹配:out-of-range也不匹配:in-range，而是:invalid -
type="tel"或type="search"即使语义上像数字，也不支持该伪类
CSS 优先级被覆盖或浏览器默认样式干扰
Chrome 和 Edge 默认会给 :invalid 加红色边框，而 :out-of-range 没有默认样式。如果你只写了 input:out-of-range { border-color: red; }，很容易被更早定义的 input:focus、全局重置样式，甚至浏览器自己的 input:invalid 规则覆盖。
调试建议：
- 打开 DevTools → Elements 面板 → 手动把元素的
value改成超限值（如min="10"时设为"5"），看右下角状态栏是否出现:out-of-range标记 - 右键元素 → “Force element state” → 勾选
:out-of-range，确认你的样式能否生效：如果能，说明是值没真正满足条件；如果不能，就是选择器权重或拼写问题 - 改用高 specificity 选择器，例如
input[type="number"]:out-of-range或加!important（仅限快速验证，生产环境慎用）
Safari 和移动端的兼容性陷阱
iOS Safari 直到 15.4（macOS 12.3+）才稳定支持 :out-of-range，旧版本下该伪类完全被忽略。更麻烦的是移动端软键盘行为：
- iOS 的
type="number"键盘虽弹数字，但允许长按输入符号、粘贴字母——此时输入非法字符，走的是:invalid流程，:out-of-range一概不触发 - Android 各厂商键盘行为不一，有的会自动过滤非数字，有的不会，导致伪类触发时机不可靠
-
:out-of-range切换不支持 CSStransition，想做平滑提示必须用 JS 控制 class
真正能落地的方案，往往得靠 input 事件监听 + checkValidity() + 手动添加 class，而不是只依赖这个伪类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
