:in-range 是 css 伪类，仅对带 min/max 属性的 number、date、time、week 等有范围限制的 input 有效，不作用于 text、email 或无范围限制的 number 输入框。
什么是 :in-range，它只对哪些元素有效
:in-range 是一个 CSS 伪类，用于匹配那些具有 min 和 max 属性、且当前值落在该范围内的 <input type="number">、<input type="date">、<input type="time">、<input type="week"> 等表单控件。它**不作用于 text、email 或无范围限制的 number 输入框**。
关键点：浏览器只在输入框有明确的 min 和 max 属性（且值为合法数字/日期）时才计算 :in-range 状态；空值、非法格式（如 "abc"）、或超出范围的输入，都会让元素进入 :out-of-range 状态。
:in-range 的样式生效条件与常见失效原因
即使写了 input:in-range { border-color: green; }，样式也可能不出现——这通常是因为：
- 输入框缺少
min或max属性（二者必须同时存在） -
value属性初始为空或非法（如value="null"），此时浏览器不视为“在范围内”，也不触发:in-range - 用户尚未输入任何内容（多数浏览器将空值视为“未校验”，既不匹配
:in-range也不匹配:out-of-range） - CSS 选择器优先级被其他规则覆盖（比如
input:focus的样式更强）
验证是否生效最简单的方法：手动输入一个符合 min 和 max 的值（如 min="10" max="100" 时输入 50），再检查开发者工具中该元素是否带有 :in-range 的匹配标识。
配合 :out-of-range 和 :valid 做更可靠的范围反馈
仅靠 :in-range 不足以覆盖所有用户场景。例如：用户删除全部内容后，输入框变空，:in-range 自动失效，但你可能仍希望提示“请输入有效数值”。这时需要组合使用：
-
:out-of-range：匹配值明确超出min/max的情况（如输入150且max="100"） -
:invalid：匹配空值、非法格式（如字母）、或超出范围——它的触发面比:out-of-range更广 -
:valid：只要值满足所有约束（包括required、min/max、类型合法性），就匹配，比:in-range更稳定
推荐写法示例：
input[type="number"]:valid {
border-color: #28a745;
}
input[type="number"]:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
这里用 :not(:placeholder-shown) 排除占位符可见时的误判，避免用户还没开始输就标红。
注意浏览器兼容性与 JavaScript 的边界协同
:in-range 在 Chrome 10+、Firefox 29+、Safari 15.4+、Edge 79+ 中支持良好，但 IE 完全不支持。更重要的是：CSS 伪类**无法阻止非法输入**，也不能替代 JS 校验。
比如用户粘贴一个超大数字、或用 DevTools 直接修改 DOM 的 value，CSS 样式会滞后甚至错乱。真正健壮的做法是：
- 用 CSS 提供视觉反馈（如边框变色、图标提示）
- 用
input事件 +checkValidity()做实时 JS 校验 - 提交前再次调用
form.reportValidity()阻断非法提交
别指望 :in-range 自己扛起数据安全或交互逻辑——它只是个“状态显示器”，不是“守门员”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
