:in-range 伪类仅在 input 设置了 min/max 属性且值为有效数字时生效，输入超限或为空/非法值时不匹配，需结合 JS 校验确保完整性。
为什么 :in-range 在数字输入框上没反应？
因为 :in-range 只对设置了 min 和/或 max 属性的表单控件生效，且仅作用于原生支持范围验证的类型（如 type="number"、type="date"）。如果只写了 CSS 但 HTML 中没设 min/max，样式永远不会触发。
常见错误现象：:in-range 样式完全不生效，控制台无报错，开发者工具里也看不到该伪类被匹配。
- 必须用
<input type="number" min="0" max="100">这类结构，缺一不可 -
min和max值需为有效数字（不能是字符串如"0"—— 虽然浏览器会尝试转换，但建议写纯数字） - 用户手动输入超限值（如输 150）时，
:in-range立即失效；删到 100 以内又恢复
:in-range 和 :out-of-range 是互斥的吗？
是，但要注意它们只反映当前输入值是否落在 min/max 定义的闭区间内，不校验是否为合法数字格式。比如输入 "abc" 或空值，两个伪类都不匹配 —— 此时元素既不在范围内，也不在范围外，而是“未验证状态”。
- 输入
50（在 0–100 内）→ 触发:in-range - 输入
120→ 触发:out-of-range - 输入
""（空）或"x"→ 两个伪类都无效，回退到默认样式 - 若只设了
min="10"没设max，则5触发:out-of-range，15触发:in-range，""仍无匹配
怎样配合 JavaScript 做更可靠的范围反馈？
CSS 伪类响应快、无需 JS，但无法覆盖所有边界情况（比如空值、非数字输入、初始值未校验）。建议用 checkValidity() + validity.rangeOverflow/rangeUnderflow 补充判断。
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[type="number"]');
input.addEventListener('input', () => {
if (input.validity.rangeUnderflow) {
input.setCustomValidity('不能小于最小值');
} else if (input.validity.rangeOverflow) {
input.setCustomValidity('不能大于最大值');
} else {
input.setCustomValidity('');
}
});
-
:in-range适合做视觉微调（如边框变绿），但别依赖它做唯一校验 - 提交前务必调用
form.checkValidity()，否则用户可能绕过样式直接提交 - 注意 Safari 对
:in-range的支持从 iOS 15.4 / macOS 12.3 才稳定，旧版本会静默忽略
为什么设了 min="0" 却仍能输入负数并触发 :in-range？
因为部分浏览器（特别是 Chrome 早期版本）对空值或非法输入的处理不一致：当输入框内容为 "-5" 但尚未失焦时，引擎可能暂未解析为数值，导致范围判断延迟或失效。更关键的是，min/max 仅约束“有效值”，不阻止用户键入字符。
- 解决方案：加
inputmode="numeric"提升软键盘体验，再配合pattern="-?[0-9]*"（仅作提示，非强制） - 真正拦截非法输入要用
input事件 +setSelectionRange修正光标位置，但代价是影响用户体验，慎用 - 最简实践：接受用户输入任意内容，靠
:out-of-range+invalid伪类+JS 校验三重提示
:in-range 的价值在于轻量、即时的视觉反馈，但它不是校验闭环的一环。容易被忽略的是：它不处理初始值合法性（比如服务器返回的值超出范围）、不兼容旧浏览器、且对空/非法输入完全沉默 —— 这些地方必须用 JS 补位。 
