:out-of-range仅在type="number"等支持类型且设置了合法min/max属性、输入值为有效数字并明确超出闭区间时生效；空值、非法字符、type="text"或未设min/max均不触发。
什么时候 :out-of-range 才会生效？
:out-of-range 只对具有数值范围限制的表单控件起作用，且仅当用户输入值明确超出 min/max 属性定义的边界时触发。它不会响应空值、非法格式（比如字母填入 type="number"）、或未设置 min/max 的情况。
- ✅ 有效场景：
<input type="number" min="0" max="100">，输入-5或105 - ❌ 无效场景：
<input type="text">、<input type="number">（没设min/max）、输入"abc"（此时是:invalid，不是:out-of-range） - ⚠️ 注意：
:out-of-range是“已提交”或“失去焦点后”才稳定触发，部分浏览器在输入过程中可能不实时更新伪类状态
怎么写报警样式才真正可见？
默认情况下，:out-of-range 没有视觉反馈。必须显式定义样式，且需注意优先级和可访问性。
- 基础报警样式建议加边框色 + 背景提示：
input:out-of-range { border-color: #e74c3c; background-color: #fdf2f2; } - 避免只用颜色区分——加图标或文字提示更可靠（可用
::after配合content，但注意input不支持::after；改用父容器包裹 +:has()或 JS 辅助） - 别覆盖掉
:focus状态：确保input:out-of-range:focus仍有明显聚焦样式，否则键盘用户无法感知 - 如果用了
appearance: none，记得重置所有交互态（包括:out-of-range下的outline和box-shadow）
:out-of-range 和 :invalid 怎么区分使用？
两者常共存，但语义和触发条件不同，混用容易误报或漏报。
-
:invalid触发更宽泛：空值、格式错误（如非数字填入number）、超出范围、违反required—— 它是表单验证的“兜底”状态 -
:out-of-range更精确：只针对已成功解析为数值、且落在min/max外的值 - 推荐组合策略：
input:invalid:not(:out-of-range)处理格式错误，input:out-of-range单独处理越界值，避免样式冲突 - JavaScript 中可通过
element.validity.rangeOverflow/rangeUnderflow精确判断，比单纯查className可靠
为什么有时样式不生效？常见陷阱
不是所有“看起来像数值输入”的元素都支持 :out-of-range，浏览器兼容性和 DOM 状态容易被忽略。
- Safari 对
:out-of-range的支持从 v15.4 才开始稳定，旧版 Safari 下完全不生效（需降级用 JS 监听input+checkValidity()） -
value属性为空字符串时，即使设置了min="1"，也不会触发:out-of-range（因为没值可比）；只有用户输入了具体数字并越界才会激活 - 通过 JS 设置
value后，不会自动触发伪类更新——必须调用inputElement.reportValidity()或模拟一次input事件 - Shadow DOM 内部的
input默认不继承外部样式，:out-of-range规则需在 shadow root 内定义
:out-of-range 是视觉辅助，关键校验和用户提示仍得由 JavaScript 控制流程和文案。尤其当需要差异化提示（比如“不能小于0” vs “不能大于100”）时，伪类本身不提供上下文信息。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
