能，但仅在表单提交前且含min/max属性时生效；不响应实时越界，不触发invalid事件；需手动写css，推荐用:out-of-range:not(:valid)或:user-invalid配合js校验。
input[type=number] 的 out-of-range 伪类真能用吗？
能，但只在表单提交前、且元素有 min/max 属性时生效；它不响应实时输入越界，也不触发 JavaScript 的 invalid 事件。浏览器默认不显示任何样式，必须手动写 CSS。
怎么让 out-of-range 立刻高亮越界输入？
关键不是靠伪类本身，而是配合 :user-invalid（Chrome 109+ / Safari 16.4+）或退而求其次用 JavaScript 监听 input 事件 + checkValidity() 手动加 class。纯 CSS 方案只有两个可靠路径：
-
input:out-of-range:not(:valid)—— 更精准，排除空值干扰 -
input:out-of-range:invalid—— 兼容稍好，但空值也会命中 - 必须确保
input有min和/或max，否则伪类永不匹配
out-of-range 样式为什么写了没反应？
常见原因就三个：
- 忘了给
input加min="0" max="100"这类属性，伪类直接失效 - 用了
type="text"而不是type="number"，浏览器不识别数值范围逻辑 - CSS 优先级被其他规则覆盖，比如
input:focus或全局重置样式压住了:out-of-range
调试建议：打开 DevTools，在 Elements 面板里手动修改 input 的 value 超出范围，看对应元素上是否出现 :out-of-range 状态标记。
要不要依赖 out-of-range 做业务校验？
不要。它只是视觉提示辅助，不阻止提交，也不修正值。用户仍可点提交按钮，后端或 JS 仍需做最终校验。更现实的做法是：
- 用
input事件监听 +parseInt(e.target.value) 实时标红并禁用提交 - 提交时用
form.reportValidity()触发原生提示，再叠加自定义样式 - 如果只支持现代浏览器，
:user-invalid比:out-of-range更贴近用户真实操作意图
最易被忽略的一点：移动端软键盘对 type="number" 支持不一，iOS 可能弹出数字键盘但允许输入字母，此时 out-of-range 完全不触发 —— 必须用 JS 拦截非数字字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
