:invalid:not(:placeholder-shown)才是控制“用户输入后才标红”的关键，需同时满足有placeholder属性和placeholder已隐藏；:valid加载即显绿因空required默认不违法，非bug而是规范行为。
:valid 本身无法防止初次加载时报错——它压根不“报错”，只是匹配合法状态；真正让你看到红边框的是 :invalid 在空 required 字段上立刻生效。问题核心不是怎么用 :valid，而是怎么让 :invalid 别一上来就亮红灯。
为什么 :valid 加载时就变绿？
因为浏览器把空的 required 输入框判定为 :invalid，而其余非 :invalid 的状态（包括空值）在某些情况下也会被当成 :valid ——尤其当没设 type 或约束属性时，:valid 的判定比你想象中宽松。这不是 bug，是规范行为：只要没明确违反规则，就默认“有效”。所以别指望靠 :valid 来“兜底”或“延迟反馈”，它不解决初始误判。
:invalid:not(:placeholder-shown) 才是关键组合
这个选择器才是控制“只在用户输过再错才标红”的实际手段。它依赖两个前提同时成立：
-
input元素必须有placeholder属性（哪怕值为空字符串placeholder=""），否则:placeholder-shown永远为 false，整个否定失效 - 用户至少触发过一次输入（哪怕只敲一个空格又删掉），导致 placeholder 隐藏，
:placeholder-shown变为 false - 此时若内容仍不满足
required、type="email"等约束，:invalid才会连带生效
Less 中嵌套写法要注意特异性顺序
在 Less 里直接写 &:invalid:not(:placeholder-shown) 很方便，但容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 如果同时写了
&:focus和&:invalid:not(:placeholder-shown)，后者权重可能被前者覆盖，导致失焦后错误样式消失 - 推荐统一用
&:not(:placeholder-shown):invalid，把:not()放前面，更易理解执行逻辑 - 避免对同一元素叠加多个
!important，比如border-color: #dc3545 !important;，后续加:user-invalid时会冲突 - 示例 Less 片段：
.form-input { border: 1px solid #ccc; &:not(:placeholder-shown):valid { border-color: #28a745; } &:not(:placeholder-shown):invalid { border-color: #dc3545; } }
兼容性与过渡方案
:user-valid 和 :user-invalid 是更干净的现代解法，但截至 2026 年 5 月，Safari 17+、Chrome 120+、Firefox 115+ 支持，Edge 已全量跟进；老版本 iOS Safari 仍需 fallback。
如果你要兼顾 Safari 16 或更早版本，:not(:placeholder-shown):invalid 仍是唯一可靠纯 CSS 路径。注意：它不能替代 JS 提交验证，也不处理自定义校验逻辑（如用户名是否已存在），仅适用于原生 HTML5 约束。
最容易被忽略的一点：placeholder 必须真实渲染出来——如果用了 input[value=""] 初始化但没设 placeholder 属性，:placeholder-shown 根本不会匹配，整个机制就失效了。
