:in-range未生效是因为浏览器未进入范围判定流程，常见原因包括type非number、min/max未同时设置、value为空或非法；其仅判断value是否在[min,max]闭区间内，不依赖step等属性。
为什么写了:in-range却没反应
不是选择器写错了，而是浏览器根本没进入范围判定流程。最常见原因有三个：type不是"number"、min和max没同时设置、或初始value为空/非法。
-
type="text"加min="0" max="10"完全无效——浏览器不解析文本框的数值范围 -
min或max缺一个（比如只设max="100"），伪类直接不激活 -
value=""或value="abc"时，既不匹配:in-range也不匹配:out-of-range，元素回退到普通样式 - 移动端 Safari ≤15.4 对
:out-of-range有延迟或不触发问题，需 JS 补充判断
:in-range和:out-of-range的边界到底怎么算
它们只做一件事：判断当前value是否落在[min, max]闭区间内。不关心step、格式、required，也不影响提交行为。
-
value="10"+min="10" max="20"→ 匹配:in-range（端点包含） -
value="20"+ 同上 → 仍匹配:in-range -
value="100"+max="10"→ 匹配:out-of-range -
value="10.5"+step="1"→ 仍匹配:in-range（step只影响:valid） -
input.value = "200"通过 JS 设置后，伪类状态不会自动更新——必须手动触发校验
怎么让提示真正被用户注意到
单靠border-color很难在密集表单中起作用。关键要组合反馈，且避免破坏可访问性。
- 对
:out-of-range加background-color: #fff5f5+box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2)，比单纯变边框更醒目 - 用相邻兄弟选择器显示提示文案：
#age:out-of-range + #age-hint::after，注意#age-hint必须紧跟在input后且不能display: none - 务必重置
outline：outline: 2px solid transparent，否则和浏览器默认焦点环打架 - 别用
display: none隐藏提示元素——会跳过屏幕阅读器
JS 赋值后伪类不更新怎么办
直接input.value = "150"不会触发校验流程，伪类状态卡住不动。必须补一步操作让浏览器重新走一遍校验逻辑。
- 调用
input.checkValidity()：仅刷新状态，不弹提示 - 调用
input.reportValidity()：会弹原生气泡，适合提交前校验 - 更贴近用户行为的做法：
input.dispatchEvent(new Event('input', { bubbles: true }))，模拟真实输入事件 - 注意：
getComputedStyle(input)无法读取伪类状态，也不能用 JS 直接查询“是否在范围内”——只能监听input事件后手动比对input.valueAsNumber与min/max
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
