:in-range和:out-of-range仅在设置了有效的min/max属性、且用户输入后触发浏览器原生校验时生效；js赋值需手动调用checkvalidity()刷新状态。
input[type=number] 的 :in-range 和 :out-of-range 什么时候生效
这两个伪类只对带 min 或 max 属性的 <input type="number">（或 range）起作用，且仅在用户输入后触发验证状态——不是实时监听值变化，而是依赖浏览器原生表单校验逻辑。比如 <input type="number" min="0" max="100"> 输入 -5 或 105 才会激活 :out-of-range。
常见错误现象：:in-range 在页面加载时就匹配，但实际值还没输；或者用 JS 改变 value 后样式没更新。这是因为伪类不响应 JS 赋值，只响应用户交互+校验结果。
- 必须显式设置
min/max，空属性或字符串值（如min=""）无效 -
type="text"即使加了min/max也不会触发这两个伪类 - IE 完全不支持，Edge 12+、Chrome 10+、Firefox 29+、Safari 15.4+ 支持
怎么让 :out-of-range 样式真正“可见”
默认情况下，:out-of-range 匹配时浏览器不会自动高亮或报错，它只是个 CSS 钩子。你得自己写样式，比如加红框、改背景色，否则用户根本不知道输入越界了。
使用场景：表单实时反馈、数据录入页防错、配置面板数值约束提示。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合
:out-of-range:focus做聚焦态强化，避免干扰非活跃输入框 - 别只改边框色，加
outline: none防止和默认焦点环打架 - 慎用
display: none或visibility: hidden—— 这会让元素脱离可访问性树，屏幕阅读器可能跳过
input[type="number"]:out-of-range {
border-color: #e53e3e;
background-color: #fff5f5;
}
input[type="number"]:out-of-range:focus {
box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
}
step 属性会影响 :in-range/:out-of-range 判断吗
不影响。范围判断只看 value 是否落在 min～max 闭区间内，和 step 无关。但 step 会影响用户能通过点击上下箭头输入哪些值，间接改变触发时机。
例如：<input type="number" min="0" max="10" step="2">，输入 1 仍是 :out-of-range 吗？不——只要 1 ∈ [0,10]，就是 :in-range，哪怕它不符合 step 规则。此时浏览器会标记为 :valid 但 checkValidity() 返回 true，而 reportValidity() 不报错。
-
step只影响:valid/:invalid，不影响:in-range/:out-of-range - 想同时约束步长和范围，得靠 JS +
input事件拦截，CSS 无能为力 - 设
step="any"时，:valid会更宽松，但范围伪类行为不变
为什么用 JS 设置 value 后 :in-range 样式不更新
因为浏览器只在用户输入、失去焦点（blur）、或调用 checkValidity() 时才重新计算范围状态。JS 直接改 input.value 不触发校验流程，伪类自然卡在旧状态。
解决办法很简单：手动触发一次校验，但注意别滥用，避免性能抖动。
- 设值后立刻调用
input.checkValidity()，它会强制刷新伪类匹配 - 不要用
input.reportValidity()，它会弹出提示框，干扰体验 - 如果批量操作多个 input，优先用
requestIdleCallback批量触发checkValidity
const input = document.querySelector('input[type="number"]');
input.value = '150';
input.checkValidity(); // 必须加这句，否则 :out-of-range 不生效
最常被忽略的是：这些伪类依赖浏览器内置的 number 类型解析逻辑，遇到非数字字符串（如 "abc"）时，valueAsNumber 是 NaN，此时既不匹配 :in-range 也不匹配 :out-of-range —— 它们只管数值范围，不管是否是有效数字。
