:in-range和:out-of-range需满足type为number或range、min/max为合法静态属性且值在闭区间内才触发；样式无效主因是类型/属性缺失、值非法或优先级被覆盖。
:in-range 和 :out-of-range 不是“自动生效”的视觉标记，它们只在 input[type="number"] 或 input[type="range"] 元素设置了有效的 min 和/或 max 属性、且浏览器完成原生校验后才触发匹配。
为什么写了样式却没反应？
常见原因不是代码写错，而是条件没满足：
-
min或max缺失、值为空（如min=""）或类型非法（如min="ten"），伪类直接不匹配 -
type不是"number"或"range"——type="text"即使加了min/max也完全无效 - 页面加载时
value已超出范围，但浏览器尚未触发校验（比如没聚焦、没输入、没调用checkValidity()） - CSS 选择器优先级被其他规则覆盖，用开发者工具检查 computed 样式里是否被 override
- 旧版 Edge（
:in-range/:out-of-range 只响应用户交互，不响应 JS 赋值
这是最容易踩的坑：用 JS 直接设置 input.value = 200，样式不会更新。因为伪类依赖浏览器表单校验状态，而 JS 赋值不触发校验流程。
必须手动补一步：
立即学习“前端免费学习笔记（深入）”；
- 赋值后立即调用
input.checkValidity()（仅刷新状态，不弹提示） - 或调用
input.reportValidity()（会弹原生错误气泡，适合提交前校验） - 更稳妥的做法是：JS 改值 →
dispatchEvent(new Event('input', { bubbles: true }))→ 浏览器按用户输入逻辑重校验
怎么让提示真正有用？别只改边框色
单纯改 border-color 很难被注意，尤其在密集表单中。建议组合使用：
- 对
:out-of-range加背景色 + 文字色 +box-shadow（例如box-shadow: 0 0 0 2px #e53e3e33） - 搭配
:out-of-range:focus强化聚焦态，避免干扰未激活字段 - 用相邻兄弟选择器显示提示文字：
#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; } - 务必加
outline: none或重置outline，否则和浏览器默认焦点环打架 - 禁用
display: none或visibility: hidden—— 这会让屏幕阅读器跳过该控件，破坏可访问性
range 类型的特殊行为：基本没实战价值
input[type="range"] 的值永远被浏览器强制限制在 min～max 内，哪怕 JS 尝试赋越界值（range.value = 200），读回来仍是截断后的合法值（如 "100"）。所以 :out-of-range 几乎永远不会匹配。
这意味着：
- 对
range写:out-of-range样式，纯属冗余 - Firefox 不支持基于范围状态的轨道样式（
::-moz-range-track无法配合伪类条件渲染），只能靠 JS 动态加 class - 真要控制滑块轨道颜色变化，得监听
input事件 + 判断当前值 + 切换自定义 class
最常被忽略的一点：这两个伪类和 step 属性完全无关。范围判断只看数值是否落在 [min, max] 闭区间内，哪怕 step="2"，输入 1 仍算 :in-range —— 因为它合法，只是不符合步长约束。想拦住非步长值，必须用 JS 拦截 input 或 change 事件。
