不能。:invalid 仅标记校验失败状态，不自动显示提示；需配合兄弟选择器（如 + 或 ~）控制同级隐藏元素显隐，或用 :user-invalid 实现用户交互后提示，但无法动态输出错误文案或响应后端校验。
input:invalid 伪类能直接显示错误提示吗？
不能。浏览器只在表单控件校验失败时自动添加 :invalid 状态，但不会主动渲染任何提示文字——它只是个状态标记，不带 DOM 输出能力。想“自动显示”，必须配合其他机制，比如用 :invalid + .error-message 控制相邻元素可见性，或用 :invalid:focus ~ .error-message 触发后续提示。
怎么用 :invalid + 同级兄弟选择器联动提示文本？
这是最轻量、无需 JS 的方案，前提是 HTML 结构中错误提示元素紧挨在表单控件之后，且是同级兄弟节点。关键点在于：提示元素必须默认隐藏，再通过伪类组合控制显隐。
-
:invalid只对设置了required、type="email"、pattern等原生校验属性的元素生效 - 提示元素必须用
+（相邻兄弟）或~（一般兄弟）连接，不能跨层或反向 - 不要依赖
:invalid:valid这类矛盾写法——浏览器不支持 - 注意表单初始加载时可能已处于
:invalid状态（如空的required输入框），提示会立即显示，体验突兀，建议加:user-invalid或结合:focus
.form-control:invalid + .error-message {
display: block;
}
.form-control:not(:user-invalid) + .error-message {
display: none;
}
.form-control:valid + .error-message {
display: none;
}
为什么 :user-invalid 比 :invalid 更适合真实场景？
:invalid 在页面加载完成就计算一次，哪怕用户还没输过内容，空的 required 输入框也会立刻触发，导致提示“闪现”。:user-invalid 是 CSS Selectors Level 4 新增伪类，仅在用户与控件交互后（如输入、失焦、提交）才激活，更符合“用户出错后提示”的直觉。
- 目前 Chrome 102+、Edge 102+、Safari 16.4+ 支持；Firefox 尚未支持（截至 2024 年中）
- 可用
@supports selector(:user-invalid)做渐进增强，降级回:invalid:focus - 若需兼容老浏览器，必须用 JS 监听
input和blur手动加 class，CSS 只负责样式
纯 CSS 方案的硬伤和绕不开的边界
所有基于 :invalid 或 :user-invalid 的纯 CSS 提示，都绕不开三个事实：
立即学习“前端免费学习笔记（深入）”；
- 无法动态输出具体错误文案（比如“邮箱格式不对” vs “该邮箱已被注册”），只能显示固定文本
- 无法响应后端校验结果（如用户名是否可用），这类必须走 JS + API
- 无法处理自定义规则（如“密码需含大小写字母和数字”），
pattern表达力有限，且错误信息不可控
所以真正健壮的表单验证，CSS 负责“状态可视化”，JS 负责“逻辑判断与文案注入”，两者各守边界。别指望一个伪类包打天下。
