:in-range不生效最常见原因是未设type="number"或缺失min/max任一属性；仅当三者齐全且值为合法数字时才触发，空值或非法输入不匹配任何伪类。
为什么 :in-range 样式不生效
最常见原因是：输入框没写 type="number"，或者漏了 min 和 max 两个属性中的任意一个。浏览器只在同时存在合法 min 和 max（比如 min="0"、max="100"）且类型为 number 时，才开始计算 :in-range 状态。
空值（value=""）默认被视作“在范围内”，所以刚加载页面时样式可能已生效；但用户输入字母（如 "abc"）或删空后，既不匹配 :in-range，也不匹配 :out-of-range——它直接退回到普通 input 样式，这点容易误判为“失效”。
- 检查开发者工具里该元素是否真的被标记为
:in-range（不是靠肉眼猜） - 避免用
input[type="text"]加min/max，这种写法完全无效 -
min或max值不能是"auto"、空字符串或非法数字（如"-"）
:in-range 和 :out-of-range 的边界行为
这两个伪类只响应「合法数字值」落在闭区间 [min, max] 内外的情况，不处理空、NaN、格式错误等中间态。
例如：<input type="number" min="10" max="50">
立即学习“前端免费学习笔记（深入）”；
- 输入
30→ 触发:in-range - 输入
60→ 触发:out-of-range - 输入
""（空）→ 不匹配任一伪类（多数浏览器行为） - 输入
"25.5"→ 匹配:in-range（小数合法） - 输入
"25a"→ 不匹配任一伪类（非法格式）
注意：某些浏览器对空值的判定略有差异，不要依赖空值必然触发 :in-range；生产环境建议配合 :invalid 做兜底视觉反馈。
样式优先级与 JS 动态赋值的冲突
如果 JS 手动设置 el.value = "120"（超出 max="100"），浏览器会立即应用 :out-of-range，但若同时写了 el.style.borderColor = "red"，内联样式会覆盖 CSS 中的 input:out-of-range { border-color: red; }。
- 优先用 CSS 控制状态样式，避免混用
style直接改样式 - 若必须 JS 控制，可用
el.classList.toggle("in-range", isValid)配合类名切换 - 使用
!important是下策，容易掩盖真实优先级问题
另外，:in-range 无法阻止用户手动输入超限值，它只是反馈——真正限制输入仍需 JS 截断或框架组件（如 rsuite 的 NumberInput、Element Plus 的 el-input-number）。
和框架组件一起用时要注意什么
像 Element Plus 的 <el-input-number></el-input-number> 或 rsuite 的 <numberinput></numberinput>，底层仍是 input[type="number"]，所以 :in-range 依然有效，但前提是它们没把原生 input 封装掉或替换成 div+input 混合结构。
验证方法很简单：打开开发者工具，找到最终渲染出的那个 <input type="number"> 元素，确认它带有 min 和 max 属性，再手动输一个合法值看是否命中 :in-range。
- rsuite 的
NumberInput默认透传min/max到原生 input，可直接用 - Element Plus 的
el-input-number在:controls="false"后仍保留原生 input，CSS 伪类照常工作 - 有些 UI 库（如早期 Ant Design）用 div 模拟输入框，此时
:in-range完全无效
真正在意范围反馈的场景，别只盯着 CSS；:in-range 是个好用的视觉钩子，但它从不保证值合法——那个责任始终在 JS 和后端。
