:valid 用于选中值合法的表单元素，需配合 required、type（如 email）或 pattern 使用；无约束时无效，空 required 初始为 :invalid，非 required 空字段处于未验证状态。
怎么用 :valid 选中值合法的表单元素
直接加在 <input>、<select></select>、<textarea></textarea> 后面就行，比如 input:valid。它只对设置了 required、type（如 email、url、number）或 pattern 的元素生效——没这些约束，浏览器压根不校验，:valid 永远不会匹配。
注意：初始加载时，空的 required 输入框是 :invalid；用户输入后满足规则才变 :valid。但没输过内容的非 required 字段（比如普通 text），既不是 :valid 也不是 :invalid，属于“未验证状态”。
:valid 不生效的常见原因
最常踩的坑是忘了加校验依据：
- 写了
input:valid { color: green; }，但<input>没设required、没写type="email"、也没配pattern - 用了
type="text"又没其他约束，浏览器认为它永远合法（即始终:valid），但实际你可能想等用户填了再变色——这得靠 JS 或换type -
value属性写死一个非法值（比如value="abc@def"配type="email"），页面一加载就触发:invalid，直到用户修改
:valid 和 :invalid 的样式优先级与 JS 干扰
CSS 伪类本身没有特殊权重，但容易被内联样式或更具体的选择器覆盖。另外，JS 手动调用 setCustomValidity("") 会重置校验状态，影响 :valid 匹配结果。
立即学习“前端免费学习笔记（深入）”；
典型干扰场景：
- 用
input.reportValidity()触发校验后，:valid状态才稳定下来（否则可能延迟更新） - 手动清空
input.setCustomValidity("error")后，必须调input.setCustomValidity("")才能恢复:valid -
:valid样式在 Safari 中对<select></select>支持较晚（iOS 14.5+ 才稳定）
和 JS 校验配合时的关键点
纯 CSS 的 :valid 只响应浏览器内置校验逻辑，不感知自定义规则。如果用了 addEventListener("input", ...) 动态改 setCustomValidity，就必须保证每次校验后都显式设置空字符串表示“通过”，否则元素会一直卡在 :invalid。
示例逻辑：
input.addEventListener("input", () => {
if (input.value.length < 3) {
input.setCustomValidity("至少3个字符");
} else {
input.setCustomValidity(""); // 这行不能漏！
}
});
漏掉最后一行，哪怕输入合法了，:valid 也不会触发——因为浏览器还记着上次的错误信息。
真实项目里，:valid 很少单独用；它真正有用的地方，是配合 :focus 或 :placeholder-shown 做渐进式提示，而不是替代 JS 校验流程。
