:in-range仅在input type为number/date/time/range且同时设置合法min和max属性、value为可解析的闭区间内值时生效；空值、非法格式或type不匹配均不触发。
什么时候 :in-range 才会生效？
它只对支持 min 和 max 属性的表单控件起作用，目前只有 <input type="number">、<input type="date">、<input type="time"> 等少数类型支持。对 type="text" 或没设 min/max 的 number 输入框，:in-range 永远不匹配。
注意：浏览器不会自动阻止用户输入超限值（比如手动输入 999 到 max="100" 的框里），:in-range 只反映当前值是否在设定范围内——值是字符串还是数字、是否已失去焦点、是否被 JS 修改过，都不影响它的计算逻辑。
:in-range 和 :out-of-range 是互斥的吗？
不是严格互斥。当输入框为空、或值为非数字（如 "abc"）、或值为空字符串时，两个伪类都**不匹配**。只有当值能被解析为有效数字，且落在 min～max 闭区间内时，:in-range 才生效；超出则 :out-of-range 生效。
-
min="10" max="20"，输入15→:in-range - 输入
5或25→:out-of-range - 输入
""、"--"、"15.5a"→ 两个伪类都无效
所以不能只靠 :in-range 做完整校验，得配合 JS 的 checkValidity() 或监听 input 事件做兜底。
如何用 CSS 实现视觉提醒但不干扰交互？
直接给 :in-range 加红边或背景容易误导——用户以为“在范围内=正确”，但其实空值、非法值都没触发该状态。更稳妥的做法是分层提示：
- 用
:valid表示值合法且在范围内（需同时设required、min、max） - 用
:invalid:not(:placeholder-shown)提示格式错误或超限 -
:in-range只用于增强反馈，比如在合法区间内显示绿色小图标：input[type="number"]:in-range + .hint::before { content: "✓"; color: #4CAF50; }
别用 :in-range 隐藏提交按钮或禁用操作——它响应滞后（比如用户粘贴超限值后，要等 blur 或 input 结束才更新），会导致体验断层。
兼容性和 fallback 怎么处理？
:in-range 在 Safari 15.4+、Chrome 100+、Firefox 100+ 支持良好，但旧版 Safari（
- 用 JS 监听
input事件，手动计算valueAsNumber并添加 class（如in-range） - 避免依赖伪类控制核心逻辑，比如提交前仍要用
input.checkValidity()再校验一次 - CSS 中写
input.in-range和input:in-range并列规则，让旧环境也能走 JS 分支
真正容易被忽略的点是：用户可能绕过所有前端限制，直接用 DevTools 修改 DOM 的 value 属性——:in-range 会立刻响应，但后端永远不能信任这个状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
