如果你是一名前端开发者，一定了解 CSS 中提供了许多对表单输入值检查的伪类。其中 :valid 和 :invalid 就是一对非常常见的伪类，我们使用它们来根据输入的有效性来给目标元素应用样式。
为什么有了 :valid 和 :invalid 还需要 :user-valid 和 :user-invalid 伪类呢？
事实上，:valid 和 :invalid 会在没有任何用户交互的情况下立即应用，这可能会引起混淆。比如，用户在填写之前就会看到电子邮件地址不正确的错误信息。这也就是 :user-valid 和 :user-invalid 出现的必要性。
本文首先介绍 :user-valid 和 :user-invalid 的基本用法以及在使用中的注意事项，最后阐述 :valid 和 :user-valid 伪类的异同。
