:in-range和:out-of-range仅对type="number"且含合法min/max属性的输入框生效；值为空、非数字或NaN时不匹配任一伪类，Safari旧版存在兼容问题，需JS+服务端双重校验。
为什么
和
看起来没反应
这两个伪类只对带
/
属性的数值型输入框生效，且浏览器必须实际解析出有效数值范围。常见失效原因不是写法错，而是类型或属性缺失。
是前提，
或没设
时完全不触发
和
必须是合法数字字符串（如
），不能是空值、
或含单位（
）
初始值超出范围时，
会立即生效；但用户清空输入框后，多数浏览器视为空值（not a number），此时两个伪类都不匹配
Chrome/Firefox 支持稳定，Safari 在旧版本（≤15.4）中对
有延迟或不触发问题
和
的样式作用时机
它们反映的是「当前值是否在
–
闭区间内」，不是「用户是否正在输入」或「表单是否提交过」。值为空、非数字、或为
时，两个伪类均不激活。
输入
，
→ 触发
输入
，
→ 触发
输入
或删光 → 不匹配任一伪类（不是
！）
输入
，
且
→ 仍算
（
不影响范围判断，只影响合法性校验
）
和
/
混用时的逻辑关系
/
只管范围，
/
还管类型、必填、
等。两者独立计算，可能同时成立。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
，输入
→ 同时匹配
和
输入
，
→
为真，但
也为真（因不满足 step）
输入空值且
→
为真，但
和
都为假
别用
替代
做通用错误提示，它覆盖不了空值、非法字符等场景
兼容性与真实可用的 fallback 方案
Safari 对
的支持直到 iOS 16.4 / macOS 13.3 才修复完整。生产环境不能只靠 CSS 伪类做关键验证反馈。
立即学习
“
前端免费学习笔记（深入）
”；
JS 中应监听
事件，用
/
主动判断并加 class
服务端永远要重新校验范围，CSS 伪类纯属增强体验
若需兼容老 Safari，可改用
结合 JS 动态 class 控制样式
注意：伪类无法通过
读取，也不能用 JS 直接触发，只能靠用户交互或属性变更驱动
事情说清了就结束。
:in-range:out-of-rangeminmaxtype="text"typeminmax"10""auto""10px":out-of-range:out-of-range:in-range:out-of-rangeminmaxNaN"5"min="10":out-of-range"15"min="10" max="20":in-range"abc":out-of-range"10.5"step="1"min="10":in-rangestep:valid/:invalid:valid:invalid:in-range:out-of-range:valid:invalidstep"-5":out-of-range:invalid"50.3"step="1":in-range:invalidrequired:invalid:in-range:out-of-range:out-of-range:invalid:out-of-rangeinputinput.validity.rangeUnderflowrangeOverflow[value] + :not([value=""])getComputedStyle