:in-range 和 :out-of-range 在 input 的 value 落入或超出 min/max 定义的闭区间时触发，仅对 type="number"、"range"、"date" 且含有效 min/max 属性的元素生效；空值或非法输入通常视为 :out-of-range，但行为不统一，需配合 required 和 pattern 验证。
什么时候会触发 :in-range 和 :out-of-range
这两个伪类只对带有 min 和 max 属性的 <input type="number"> 或 <input type="range"> 生效。浏览器会实时比对当前 value 是否落在 [min, max] 闭区间内：在范围内触发 :in-range，否则触发 :out-of-range。注意，type="date" 也支持，但 type="text" 或没设 min/max 的输入框完全不会响应这两个伪类。
:in-range 和 :out-of-range 的样式优先级与限制
它们属于「用户动作后才生效」的动态伪类（类似 :valid/:invalid），不能通过 JavaScript 直接读取计算样式，也不能用 getComputedStyle() 检测状态。样式上，它们的权重等同于普通类选择器，但会受层叠顺序影响——比如 input:out-of-range:focus 就比单独的 input:out-of-range 优先级高。
- 不支持过渡动画（
transition）直接作用于伪类切换，需配合:valid/:invalid或 JS 监听input事件间接实现 - 部分旧版 Safari 对
:out-of-range支持不稳定，建议加一层input:invalid:not(:placeholder-shown)作降级 - 若
value为空或非数字（如用户输入了字母），多数浏览器会视作:out-of-range，但行为不统一，应配合required和pattern控制输入格式
实际可用的样式控制示例（含 range 类型滑块）
以下 CSS 同时适配 number 输入框和 range 滑块，用边框色和背景提示范围状态：
input[type="number"]:in-range,
input[type="range"]:in-range {
border-color: #4caf50;
background-color: #f9f9f9;
}
input[type="number"]:out-of-range,
input[type="range"]:out-of-range {
border-color: #f44336;
background-color: #fff8f8;
box-shadow: 0 0 4px rgba(244, 67, 54, 0.3);
}
对 <input type="range">，还可单独美化轨道：
立即学习“前端免费学习笔记（深入）”；
input[type="range"]:out-of-range::-webkit-slider-runnable-track {
background: #ffebee;
}
input[type="range"]:in-range::-webkit-slider-runnable-track {
background: #e8f5e9;
}
注意：WebKit 轨道伪元素仅限 Chrome/Safari，Firefox 需用 ::-moz-range-track 单独写，且不支持基于范围状态的条件样式 —— 所以 Firefox 下只能靠 JS 动态加 class 来补全。
为什么有时样式不生效？常见排查点
最常被忽略的是属性缺失或值类型错误：
-
min和max必须是有效数字字符串，如min="0"可行，min="zero"或min=""会导致伪类失效 -
value初始值未设置或设为非数字（如空字符串、"abc"），部分浏览器会跳过范围校验 - 使用了
step属性但用户输入/拖动停在非步进点上（例如min="0" max="10" step="2"，输入3），此时仍算:out-of-range，但容易误判为 bug - Vue/React 等框架中，若用
v-model或value + onChange控制输入框，需确保 state 初始化为合法数字，否则初始渲染时无value属性，伪类不触发
真正起作用的永远是 DOM 上真实存在的 min、max 和 value 属性值，而不是 JS 变量或组件 props。
