:out-of-range仅对含min/max的数值型输入有效，如number、date、time、datetime-local、range；text、email、checkbox等不支持。需设min/max、值为合法数字且超界才触发，否则属:invalid或无效。
哪些表单元素支持 :out-of-range
:out-of-range 只对设置了 min 或 max 属性的数值型表单控件生效，不是所有 都能用。常见支持的类型包括：type="number"、type="date"、type="time"、type="datetime-local"；type="range" 也支持，但要注意它默认总在范围内（除非手动设了非法值）。
不支持的典型例子：type="text"、type="email"、type="checkbox" —— 即使加了 min/max 属性，浏览器也忽略，:out-of-range 永远不会匹配。
-
type="number"最常用，配合min="1"max="100"后，输入 -5 或 101 就触发 -
type="date"要注意时区和格式：用户选了2020-01-01，但min="2022-01-01"，才算超范围 - 没有
min和max属性，:out-of-range完全无效，哪怕值看起来“不合理”
:out-of-range 不生效的三个常见原因
写了样式却没变红？大概率卡在这几个地方：
- 忘了给
加min或max—— 这是前提，不是可选项 - 输入值是字符串（比如用户输了个字母），此时浏览器会视为“无效值”（
:invalid），而不是“超范围”，:out-of-range不匹配 - CSS 选择器权重太低，被其他规则覆盖，比如
input { color: black; }写在后面，会盖掉input:out-of-range { color: red; }
验证是否命中：打开 DevTools，在 Elements 面板里右键元素 → “Force element state” → 勾选 :out-of-range，看样式是否如预期变化。如果强制后有效，说明是值没真正触发状态。
怎么让超出范围的值真正“变红”
直接写 input:out-of-range { color: red; } 只影响文字颜色，但实际中常需更明显提示。关键点在于：伪类只作用于元素本身，不能跨级操作父容器或兄弟标签。
- 想高亮整个输入框边框：
input:out-of-range { border-color: red; } - 想加红色背景但保留文字可读：
input:out-of-range { background-color: #ffebee; } - 想同时改文字+边框+阴影：
input:out-of-range { color: #c00; border-color: #c00; box-shadow: 0 0 4px rgba(204, 0, 0, 0.3); } - 注意：不要依赖
:out-of-range做校验逻辑，它纯属 UI 状态反馈；后端/JS 仍需独立验证
兼容性和边界行为要注意什么
Chrome、Firefox、Safari（15.4+）、Edge 全都支持 :out-of-range，但 Safari 在 type="date" 上有个坑：如果用户通过键盘输入日期（而非日历弹窗选择），部分旧版本可能不触发该伪类。
-
type="number"输入空值或小数点时，不算超范围，也不算:invalid（除非设了step且不合规） - 移动端软键盘可能不显示数字键，用户仍可能输字母——这时走的是
:invalid，不是:out-of-range - 动态修改
min/max属性后，浏览器会重新计算状态，但某些老版本 Safari 需要手动触发input事件才能刷新样式
最易被忽略的一点：这个伪类只反映当前值是否在声明的范围内，它不管业务逻辑里的“合理范围”。比如年龄输入框设了 min="0" max="150"，用户填了 151 是红色，但填了 3 也可能业务上不合理——这种得靠 JS 额外判断，CSS 做不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
