:in-range仅提供视觉反馈，不控制输入；生效需type为number/date/time、同时设置合法min/max、value为有效数字；状态无法通过JS查询，须手动比对valueAsNumber与范围。
:in-range 不能限制用户输入，它只提供视觉反馈。真正限制输入必须靠 JS 截断、step 配合 min/max，或使用带校验逻辑的组件库。
为什么写了 :in-range 样式却完全没反应？
浏览器压根没启动范围判定，不是选择器写错，而是缺了任一硬性条件：
-
type不是"number"（"date"或"time"也行，但type="text"加min/max完全无效） -
min和max没有**同时设置**，或值非法（如min=""、min="auto"、min="10px"） - 当前
value是空字符串（""）、"abc"、" "等——这些值既不匹配:in-range，也不匹配:out-of-range
:in-range 和 :out-of-range 的边界到底怎么算？
它们只做一件事：判断 input.valueAsNumber 是否落在 [min, max] 闭区间内。和 step、格式、required 都无关：
-
value="10"+min="10" max="20"→ 匹配:in-range（端点包含） -
value="20.0"+ 同上 → 仍匹配:in-range -
value="10.5"+step="1"→ 仍匹配:in-range（step只影响:valid） -
value="abc"或value=""→ 两个伪类都不匹配（此时应靠:invalid捕获）
怎样让提示真正被用户注意到？
单改 border-color 在密集表单中几乎无效，必须组合强化：
立即学习“前端免费学习笔记（深入）”；
- 用
box-shadow+background-color（如#fff8f8）比纯边框更醒目 - 用相邻兄弟选择器显示文案：
#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }，前提是#age-hint紧跟其后且未设display: none - 务必重置
outline（如outline: 2px solid transparent），否则和浏览器默认焦点环打架 - JS 动态赋值后状态不更新？得手动触发：
input.dispatchEvent(new Event('input', { bubbles: true }))
最易被忽略的关键事实
:in-range 状态无法通过 JS 查询：element.matches(':in-range') 在多数浏览器中返回 false，即使样式已生效；getComputedStyle(input) 也读不到。它纯粹是渲染层信号。你要程序化判断，只能监听 input 事件后手动比对 input.valueAsNumber 与 min/max 属性值。
