:in-range伪类仅在type为number/date/time/range且min/max同时存在且合法时生效；空值、text类型、缺属性或非法value均不触发，js赋值需手动派发input事件。
:in-range 伪类只在 type="number"（或 date/time/range）且同时存在合法 min 和 max 属性时才生效；空值、type="text"、缺属性、非法格式（如 value="abc"）均不会触发——这是 90% 的样式“没反应”的根本原因。
为什么写了 input:in-range 却完全没效果
不是选择器写错了，而是浏览器压根没进入范围判定流程：
-
type必须是"number"、"date"等原生支持范围的类型；type="text"加了min/max也无效 -
min和max必须同时存在，且值为可解析字符串（如min="0"，不能是min=""或min="auto"） - 初始
value=""或value="abc"时，两个伪类都不匹配——浏览器视为“无有效值”，不计算范围 - JS 直接赋值
input.value = "15"不会触发状态更新；必须补input.dispatchEvent(new Event('input', { bubbles: true }))或调用checkValidity()
:in-range 的边界行为和真实匹配逻辑
它只做一件事：判断当前已解析的 value 是否落在 [min, max] 闭区间内，不关心是否合法、是否必填、是否符合 step：
-
value="10"+min="10" max="20"→ 匹配:in-range（端点包含） -
value="20"+ 同上 → 也匹配:in-range -
value="10.5"+step="1"→ 仍匹配:in-range（step不影响范围判定） -
value="100"+min="10" max="20"→ 匹配:out-of-range，而非:invalid -
type="range"几乎永远匹配:in-range，因为浏览器强制截断值，:out-of-range基本无实战价值
样式写法与容易被忽略的兼容性坑
纯 CSS 反馈必须绕开几个限制才能真正可用：
- 别依赖
background-color：某些浏览器默认样式（如 Chrome 的input[type="number"]）会覆盖背景，优先用border-color或box-shadow - 无法用
transition直接过渡:in-range切换；需改用:valid/:invalid或 JS 控制 class - Safari ≤15.4 对
:out-of-range有延迟或不触发问题，建议叠加:invalid:not(:placeholder-shown)降级 -
getComputedStyle(input).getPropertyValue('border-color')读不到伪类状态——它不可计算，只能监听input事件后手动比对input.valueAsNumber与min/max - 样式优先级易被覆盖：若同时有
input:focus规则，input:in-range:focus才能确保生效
最常被跳过的一步：伪类只是视觉提示，不影响提交行为。哪怕显示红色边框，用户仍可点击提交——min/max 可被绕过，服务端和 JS 层校验一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
