必须同时满足type="number"（或range/date等）、min/max为合法数字字符串、且当前值为有效数字，:in-range/:out-of-range才生效；type="text"、min/max非法、空值或非法输入均不触发，js赋值需手动触发校验。
:in-range 和 :out-of-range 不会自动生效，必须同时满足 type="number"（或 range/date 等）、min 与 max 是合法数字字符串、且当前值被浏览器解析为有效数字——缺一不可。
为什么写了样式却完全没反应？
最常见原因不是 CSS 写错，而是 HTML 结构不达标：
-
type不是"number"或"range"——type="text"即使加了min="1"max="10"也彻底无效 -
min或max值为空（min=""）、含单位（max="10px"）、或非法字符（min="ten"），浏览器直接忽略该属性，伪类失去判断依据 - 输入值为空（
value=""）或非法（"abc"、"12a"、"--"）——此时既不匹配:in-range也不匹配:out-of-range，回退到默认样式 - 初始值超出范围但未触发校验：某些浏览器（尤其旧版 Safari）需用户首次聚焦再失焦才更新状态，非即时响应
JS 赋值后样式不更新怎么办？
直接写 input.value = "200" 不会触发伪类重算，因为浏览器校验状态未刷新：
- 调用
input.checkValidity()可强制刷新状态（无提示），适合静默更新 - 调用
input.reportValidity()会弹原生错误气泡，适合提交前校验 - 更贴近用户行为的做法：
input.value = "200"; input.dispatchEvent(new Event('input', { bubbles: true }));—— 触发完整输入流程，包括校验和伪类匹配 - 别用
getComputedStyle(input).getPropertyValue('border-color')判断状态，伪类无法通过 JS 读取
怎么让视觉反馈真正有用？
单改边框色容易被忽略，尤其在密集表单中：
- 对
:out-of-range组合使用：background-color+box-shadow（如box-shadow: 0 0 0 2px #e53e3e33）+ 文字色变化 - 搭配
:out-of-range:focus强化聚焦态，避免干扰未激活字段 - 用相邻兄弟选择器显示提示文字：
#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; } - 务必重置
outline（如outline: none），否则和浏览器默认焦点环打架 - 禁用
display: none或visibility: hidden—— 这会让屏幕阅读器跳过该控件，破坏可访问性
哪些场景根本用不了 :out-of-range？
input[type="range"] 几乎永远不触发 :out-of-range：
- 滑块拖动本身就被浏览器强制限制在
min～max内，用户无法输入越界值 - 即使 JS 强行赋值越界（
range.value = "200"），读回来仍是截断后的合法值（如"100"） - Firefox 不支持基于范围状态的轨道样式（
::-moz-range-track无法配合伪类条件渲染） -
:in-range/:out-of-range对step属性完全无感——它只看数值是否落在闭区间内，不管是否符合步长
伪类只是视觉钩子，不阻断提交、不影响 checkValidity() 结果；空值或非法字符也不会触发它们。真要拦住错误数据，JS 校验和服务端验证一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
