:in-range伪类仅对原生支持范围限制的输入类型生效，需确保type属性匹配且min/max为HTML静态属性，value值格式正确并处于边界内。

in-range 伪类只对具有 min 和 max 属性的 、 等**原生支持范围限制的输入类型**生效。如果样式不生效，核心原因通常是“条件未满足”——不是 CSS 写错了，而是 HTML 结构或属性值没配对。

检查 input 类型是否支持 range 状态

只有以下类型才可能触发 :in-range：

• type="number"（需同时设 min 和 max）
• type="range"（浏览器自动赋予默认 min/max，通常为 0–100）
• type="date"、type="datetime-local"、type="month" 等时间类输入（需设 min/max 属性）

❌ 错误示例： —— 文本框不解析 min/max，:in-range 永远不会匹配。

确认 min/max 属性是 HTML 属性，不是 CSS 或 JS 动态设置

:in-range 依赖浏览器在**解析 HTML 时读取的静态属性值**，不是运行时计算结果：

• ✅ 正确：
• ❌ 无效： + 后续用 JS 设置 el.min = "5"; el.max = "15"; —— 大多数浏览器不重新触发 :in-range 状态

若必须动态控制，建议改用 JS 切换自定义 class（如 .is-in-range），再用 CSS 控制样式。

注意 value 值的格式与类型匹配

值必须能被正确解析为对应类型的有效数字或日期：

• type="number"：value 必须是纯数字字符串，如 "7"，不能是 "7px" 或空格包裹的 " 7 "
• type="date"：value 格式必须为 YYYY-MM-DD，如 "2025-05-20"；min="2025-01-01" 才会生效判断
• 浏览器对边界值的处理是「包含」：value 等于 min 或 max 时，仍属于 :in-range

避免被其他样式或继承覆盖

即使状态匹配，CSS 也可能因优先级或 display/visibility 等属性失效：

• 检查是否写了 input:in-range { color: red; }，但被更具体的规则（如 input:focus 或父容器 input[required]）覆盖
• 确保元素未设置 display: none 或 visibility: hidden —— 伪类仍存在，但视觉不可见
• 可临时加 !important 测试是否是优先级问题（上线前需移除）