:out-of-range 仅提供视觉反馈，不阻止提交或抛出异常；需同时满足type为number/date等、min/max合法且存在、value越界三条件才生效，Safari≤15.4及IE需JS兜底。
:out-of-range 不能捕获错误，它只在特定条件下提供视觉反馈，且完全不阻止提交或抛出异常。
为什么 :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
必须同时满足全部条件：
立即学习“前端免费学习笔记（深入）”；
-
type是原生支持范围校验的类型（"number"最常用） -
min和max同时存在，且值为合法格式（number输入用纯数字字符串，如"0"、"100"） -
value是有效数字字符串（非空、非字母、非单位后缀），且数值明确落在[min, max]闭区间外 - 用户已输入完成并失焦，或浏览器已重新计算 validity 状态（部分浏览器不会在输入中实时更新）
示例有效 HTML：<input type="number" min="0" max="100" value="150"> → 触发 :out-of-range；<input type="number" max="100" value="150"> → 不触发（缺 min）。
: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 单独高亮越界值。这样能避免 "abc" 和 150 都被同一套红色边框覆盖，导致用户无法区分是输错了类型还是超了范围。
JS 赋值后 :out-of-range 不更新怎么办
直接通过 JS 设置 input.value = "200" 不会触发校验流程，伪类状态卡住不动。必须补一步让浏览器重新走一遍校验逻辑：
- 调用
input.checkValidity()：仅刷新状态，不弹提示 - 调用
input.reportValidity()：会弹原生气泡，适合提交前校验 - 更贴近用户行为的做法：
input.dispatchEvent(new Event('input', { bubbles: true }))，模拟真实输入事件
注意：getComputedStyle(input) 无法读取伪类状态，也不能用 JS 直接查询“是否在范围内”——只能监听 input 事件后手动比对 input.valueAsNumber 与 min/max。
最常被忽略的一点：Safari ≤15.4 对 :out-of-range 支持不稳定，移动端可能延迟或不触发；IE 完全不支持。如果目标环境包含这些旧版本，必须用 JS 补充监听 + 手动判断，不能只靠 CSS。
