:out-of-range伪类需同时满足type为number/date/time、min/max合法存在、value为有效数字才生效；否则不匹配，常见错误是类型不符、属性非法或js赋值后未触发校验。
:out-of-range 样式不会自动生效，必须同时满足 type="number"（或 date 等支持类型）、min/max 属性存在且合法、value 为有效数字这三项条件；否则伪类根本不匹配。
为什么写了 :out-of-range 却没反应
常见错误不是 CSS 写错，而是基础条件缺失：
-
type不是"number"、"date"、"time"等支持类型——type="text"加了min/max也完全无效 -
min或max值为空（如min=""）、非法（如min="ten"）或未声明，伪类直接不触发 - JS 直接赋值
input.value = "200"后样式不更新——浏览器不因 JS 赋值重跑校验，需手动调用input.checkValidity()或触发input事件 - CSS 优先级被覆盖：比如全局
input { border: 1px solid #ccc; }比input:out-of-range权重低，但若加了!important或更具体选择器就可能压住它
:out-of-range 和 :invalid 的关键区别
二者常被混用，但语义和覆盖范围不同：
-
:out-of-range只在value是合法数字且超出min/max闭区间时匹配（例如min="1" max="10"，输入15） -
:invalid范围更广：空值（配合required）、格式错误（如type="number"输入"abc"）、越界、甚至setCustomValidity("xxx")报错都会命中 - 实际中推荐组合使用：
input:out-of-range:not(:valid)更精准，排除空值干扰；input:out-of-range:invalid兼容稍好但空值也会触发
怎么让提示真正被用户注意到
单改 border-color 很难被识别，尤其在密集表单里。建议组合强化：
- 对
:out-of-range加背景色 + 文字色 +box-shadow，例如：background-color: #fff5f5; color: #c00; box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2); - 用相邻兄弟选择器显示提示文字：
#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }，注意#age-hint必须紧跟在 input 后面且不可display: none - 聚焦态单独处理：
input:out-of-range:focus加强阴影或 outline，但记得重置默认outline，否则和浏览器焦点环打架 - 移动端要额外防坑：iOS 软键盘允许输入字母，此时
:out-of-range完全不触发——必须用 JS 拦截非数字字符
别把它当校验逻辑用
:out-of-range 是纯 UI 反馈，不阻止提交、不修正 value、也不触发 invalid 事件。最易被忽略的一点是：
- 用户仍可点击提交按钮，后端或 JS 必须做最终校验
- range 类型几乎永远不触发
:out-of-range——浏览器会强制把value截断到min～max内，所以给type="range"写该伪类基本是冗余 - 真正要实时响应，得靠 JS 监听
input事件 +checkValidity()+ 手动加 class，:out-of-range只适合做轻量级视觉辅助
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
