:out-of-range样式无反应几乎总是因未设min/max、type不支持范围验证（如type="text"）、或min/max值非法；需结合:invalid区分使用，js赋值后须调用checkvalidity()或dispatch input事件触发，且不可替代js/后端校验。
为什么写了 :out-of-range 样式却完全没反应
几乎总是以下三点之一：
• input 没设 min 或 max 属性（哪怕只写一个也必须写）
• type 不是 "number"、"date"、"time"、"week"、"month" —— 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 隐藏越界输入框——这会让屏幕阅读器跳过，破坏可访问性。
JS 赋值后样式不更新？必须手动触发校验
:out-of-range 不响应 JS 直接赋值：
• input.value = 150 或 input.setAttribute('value', '150') 后，样式不会自动更新
• 必须补一步：input.checkValidity()（只刷新状态）或 input.reportValidity()（弹原生气泡）
• 更贴近用户行为的做法：赋值后触发事件 —— input.dispatchEvent(new Event('input', { bubbles: true }))
• 特别注意：input[type="range"] 几乎永远不触发 :out-of-range，因为它的值会被浏览器自动截断到 [min, max] 内，JS 赋越界值也读不到原始非法值。
最常被忽略的一点：Safari 对 :out-of-range 的支持从 v15.4 才开始稳定，旧版 Safari 下完全不生效；iOS 软键盘对 type="number" 支持不一，可能允许粘贴字母——此时走的是 :invalid 流程，:out-of-range 完全不触发。所以它只能是视觉辅助，不能替代 JS 校验或后端验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
