:out-of-range 无效的根本原因有三：未设 min/max 属性、type 不支持范围验证、min/max 值非法；需结合 :invalid 区分使用，并用边框/背景/阴影等组合样式增强提示，同时注意 safari 兼容性及 js 手动校验。
为什么写了 :out-of-range 样式却没反应
根本原因几乎总是以下三点之一：
• input 没设 min 或 max 属性（哪怕只写一个也行），伪类直接不匹配
• type 不是 "number"、"date"、"time" 等原生支持范围的类型；type="text" 加了 min="0" 也完全无效
• min/max 值非法，比如 min=""、min="ten"、min="10px"，浏览器解析失败，伪类失效
调试建议：打开 DevTools，在 Elements 面板里手动改 value 为超界值（如 value="200"），再看该元素是否被标记为 :out-of-range 状态。
:out-of-range 和 :invalid 必须区分使用
二者语义和触发条件不同，混用容易误报或漏报：
• :out-of-range 只在值是合法数字、且明确落在 [min, max] 闭区间外时匹配（例如 min="1" max="10"，输入 15）
• :invalid 范围更广：空值（配合 required）、格式错误（如 type="number" 输入 "abc"）、越界、甚至 setCustomValidity("xxx") 报错都会命中
推荐组合策略：input:invalid:not(:out-of-range) 处理格式错误，input:out-of-range 单独处理越界值，避免样式冲突。
怎么写出真正可见、可用的警告样式
单靠 border-color: red 很难被注意，尤其在密集表单中。推荐组合使用：
• 边框 + 背景 + 阴影：border-color: #e53e3e; background-color: #fff5f5; box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
• 用相邻兄弟选择器显示提示文字：#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }（注意 #age-hint 必须紧跟在 input 后面且不可 display: none）
• 聚焦态单独强化：input:out-of-range:focus 加强阴影或 outline，但记得重置默认 outline，否则和浏览器焦点环打架
• 别用 display: none 或 visibility: hidden 隐藏越界输入框——这会让屏幕阅读器跳过，破坏可访问性。
移动端和兼容性必须手动兜底
:out-of-range 在 Safari 中从 v15.4 才开始稳定支持，旧版 Safari 下完全不生效；iOS 软键盘对 type="number" 支持不一，可能弹出数字键盘但允许用户粘贴字母或符号——此时 :out-of-range 完全不触发，因为非法输入走的是 :invalid 流程。
所以不能只靠伪类：
• 对于 JS 赋值（如 input.value = 150），必须补调 input.checkValidity() 或触发 input 事件才能更新状态
• input[type="range"] 几乎永远不触发 :out-of-range，因为它的值会被浏览器自动截断到 [min, max] 内
• 最易被忽略的一点：它只是视觉反馈辅助，不阻止提交，也不修正 value，后端或 JS 仍需做最终校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
