:out-of-range仅在type为number/date/time等、显式设置合法min/max、且value为浏览器可解析的合法值并超出范围时生效；其他情况触发:invalid或无效。
:out-of-range 只在值合法且明确超出 min/max 时才生效，不是所有输入框都能用，也不是所有“看起来不对”的输入都会触发它。
哪些 input 类型和属性组合才触发 :out-of-range
必须同时满足三个条件，缺一不可：
-
type是"number"、"date"、"time"、"datetime-local"、"month"、"week"或"range" - 显式设置了
min和/或max属性（min="0"、max="100"这类字符串，不能是空值、"auto"或带单位如"100px"） - 当前
value是浏览器能解析的合法值，且数值落在范围外（例如min="10"max="20"，输入"25"）
常见无效场景：type="text" 即使加了 min/max 也完全不触发；输入 "abc" 或空字符串触发的是 :invalid，不是 :out-of-range。
:out-of-range 样式写不生效的典型原因
写了样式却没反应，大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- DevTools 里检查元素，确认
min/max确实存在且格式正确（比如日期必须是YYYY-MM-DD） - 右键元素 → “Force element state” → 勾选
:out-of-range，看样式是否生效：如果强制后有效，说明是值没真正满足触发条件 - 选择器权重不够，被其他规则覆盖（比如
input { border: 1px solid #999; }写在后面）——改用input[type="number"]:out-of-range提升 specificity - Safari（≤15.4）对
type="date"键盘输入可能不触发，需 JS 补充监听input事件
怎么写出真正有用的视觉反馈
单改边框色容易被忽略，建议组合使用：
- 加红色边框 + 轻微阴影：
input:out-of-range { border-color: #c00; box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.2); } - 配合相邻兄弟选择器显示提示文字：
#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #c00; }（确保#age-hint是紧邻的后续兄弟元素） - 避免用
display: none隐藏提示，这会破坏屏幕阅读器可访问性 - 不要依赖
transition动画 ——:out-of-range切换不支持 CSS 过渡，得用 JS 控制 class
伪类只是 UI 状态标记，无法读取（getComputedStyle 拿不到）、不能替代校验逻辑、也不能捕获空值或非法格式 —— 它只告诉你“这个合法数字，确实超了”。
