:in-range 不生效通常因 html 结构或属性值不满足触发条件。仅当 type="number"（或 date/time）且 min/max 为合法静态数值属性时才生效；value 必须为可解析数字且在 [min, max] 闭区间内；js 动态设置需派发事件或调用 checkvalidity()；伪类不可被 js 查询，不能替代校验。
:in-range 不生效，几乎总是 HTML 结构或属性值不满足触发条件，不是 CSS 写错了。
检查 type 和 min/max 是否同时合法
浏览器只对 type="number"（或 date/time）且同时存在合法 min 与 max 属性的元素计算 :in-range 状态：
-
type="text"加了min和max完全无效——它根本不走数值校验流程 -
min或max为空、含单位（如max="100px"）、写成min="auto"，浏览器直接忽略该属性 - 必须是静态 HTML 属性：
<input type="number" min="0" max="100" value="50">✅；用 JS 动态设el.min = "0"❌（多数浏览器不重触发）
确认 value 是可解析的数字字符串且落在闭区间内
:in-range 只判断「当前值是否为有效数字，并落在 [min, max] 闭区间内」，其余所有情况都不匹配：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
value="5"+min="0"max="10"→ 匹配:in-range -
value=""、value="abc"、value="12a"、value=" 7 "→ 两个伪类都不匹配（不是:out-of-range！） -
value="10"+min="10"max="20"→ 仍匹配:in-range（端点包含） -
step不影响范围判断，只影响:valid状态
JS 赋值后样式没更新？别直接改 value 属性
直接写 input.value = "25" 不会刷新浏览器的校验状态，伪类不会重算：
- 正确做法：赋值后立即派发事件 ——
input.dispatchEvent(new Event('input', { bubbles: true })) - 替代方案：
input.checkValidity()可静默刷新状态；input.reportValidity()会弹原生提示 - 错误做法：试图用
getComputedStyle(input).getPropertyValue('border-color')判断是否在范围内——伪类状态无法通过 JS 查询
移动端和 Safari 兼容性陷阱
iOS Safari ≤15.4 对 :out-of-range 支持不稳定，可能延迟触发或完全不生效；:in-range 虽支持良好，但整个伪类链渲染可能卡顿：
- 不要依赖
transition直接过渡:in-range切换——它不支持 CSS 动画 - 真正安全的降级路径是：用 JS 监听
input事件，手动比对input.valueAsNumber与min/max，再切换自定义 class - 别让
:in-range替你做校验——用户删空、粘贴非法字符、禁用 JS，样式都会失效
最常被忽略的一点：伪类只是 UI 钩子，不是校验代理。你永远没法用 JS 问“它现在是不是在范围内”，只能自己算；而服务端和 JS 层的校验，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
