:valid伪类需配合html5校验属性（如required、type="email"）才生效，否则始终不匹配；其状态在提交或失焦后触发，非实时；css优先级和浏览器默认样式可能覆盖边框效果。
用 :valid 伪类加绿色边框前，先确认表单控件有校验约束
直接写 input:valid { border: 2px solid green; } 没效果？大概率是因为输入框没定义任何校验规则。:valid 不是“内容非空就触发”，它只响应 HTML5 原生表单验证（required、type="email"、pattern、min/max 等）。没有这些属性，浏览器认为该字段“始终有效”，:valid 永远不匹配。
-
type="email"是最轻量的启用方式，哪怕只是占位校验 -
required强制非空，配合:valid能覆盖基础场景 - 如果用了 JavaScript 动态修改
value，记得同步调用input.reportValidity()触发状态更新
:valid 和 :invalid 的状态切换时机很关键
浏览器默认只在用户**提交表单**或**离开焦点（blur）** 后才首次触发验证并设置 :valid/:invalid。这意味着：刚输入正确邮箱时边框不会立刻变绿，要等失焦或提交后才生效。
- 想实时响应，得用
input事件 + JS 手动控制 class，例如：input.classList.toggle('is-valid', input.checkValidity()) - 纯 CSS 方案下，可加
:focus:valid提前反馈，但仅限当前聚焦且已通过验证的状态 - 注意
:invalid在未交互前可能也匹配（如空required字段），可用:user-invalid替代（Chrome 102+、Firefox 106+ 支持）来避免初始误标
样式优先级和重置默认边框容易被忽略
很多 UI 框架（如 Bootstrap）或自定义 reset.css 会重置 input 的 border，导致 :valid 的绿色边框被覆盖。同时，:valid 的权重和普通类选择器一样，没加 !important 就可能输。
- 检查 computed styles，确认原生
border是否为none或极细 - 把规则写具体些，比如
input[type="email"]:valid比单纯input:valid优先级高 - 如果框架强制设了
border-color，直接覆盖：input:valid { border-color: #28a745 !important; }
兼容性与渐进增强的实际取舍
:valid 在所有现代浏览器都支持（IE10+），但老版本 Safari 对 pattern 验证的 :valid 响应有延迟，部分安卓 WebView 也不稳定。如果产品必须支持弱环境，别只依赖它。
立即学习“前端免费学习笔记（深入）”；
- 服务端永远要做最终校验，CSS 状态只是辅助反馈
- 对关键字段（如密码确认），建议用 JS 监听并手动添加/移除
is-valid类，更可控 - 不要用
:valid替代错误提示文案——它不提供语义信息，屏幕阅读器无法识别
真正起作用的不是伪类本身，而是你是否让浏览器「知道该验证什么」以及「什么时候去验证」。边框颜色只是表层，底层逻辑没对齐，再绿也没用。
