:out-of-range样式无反应几乎总是因三者之一：未设min/max属性、type不支持范围验证（如type="text"）、min/max值非法；需与:invalid区分使用，并用边框+背景+阴影组合强化提示，Safari旧版及IE需JS兜底。
为什么写了 :out-of-range 样式却完全没反应
几乎总是因为这三件事没做对：
• <input> 没写 min 或 max 属性（哪怕只写一个，比如 min="0"）
• type 不是 "number"、"date"、"time" 等原生支持范围验证的类型（type="text" 加 min 无效）
• min 或 max 值非法，例如 min=""、min="10px"、min="ten"——浏览器解析失败，伪类直接不匹配
调试时可直接在 DevTools 的 Elements 面板里手动改 value 为超界值（如 value="200"），再看元素是否被标记为 :out-of-range 状态。
:out-of-range 和 :invalid 必须分开用
二者触发逻辑完全不同，混在一起写样式大概率漏提示或互相覆盖：
• :out-of-range 只匹配“值是合法数字，且明确落在 [min, max] 闭区间外”的情况（例如 min="18" max="65"，输入 70）
• :invalid 范围宽得多：空值（配合 required）、格式错误（如 type="number" 输入 "abc"）、越界、甚至 setCustomValidity("xxx") 都会命中
推荐组合写法：input:invalid:not(:out-of-range) 处理格式错误input:out-of-range 单独处理越界值
避免写成 input:invalid { border-color: red; } 这种笼统规则，否则越界和输字母都一样红，用户无法区分问题类型。
怎么写出真正能被注意到的警告样式
单靠 border-color: red 在密集表单中极易被忽略：
• 推荐组合：边框 + 背景 + 阴影 —— 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: none），否则和浏览器焦点环打架
• 提示文字别塞进 input::after（不支持），改用相邻兄弟选择器：#age:out-of-range + #age-hint::after，前提是 #age-hint 紧跟在 input 后面且不能是 display: none 或 visibility: hidden（否则破坏屏幕阅读器可访问性）
Safari 和移动端必须手动兜底
:out-of-range 在 Safari 中从 v15.4 才稳定支持，旧版完全不生效；iOS 软键盘对 type="number" 支持混乱：可能弹出数字键盘，但允许粘贴字母——此时走的是 :invalid 流程，:out-of-range 根本不触发。
所以不能只靠伪类：
• JS 赋值（如 input.value = 150）后需手动调 input.checkValidity() 或触发 input 事件
• 对关键字段，仍要补 JS 校验逻辑，尤其涉及提交拦截或后端一致性校验时
• IE 全系不支持该伪类，若需兼容，JS 判断是唯一可靠路径
立即学习“前端免费学习笔记（深入）”；
