input:invalid不生效是因为必须配合required、type="email"等校验属性，且需用户失焦或提交后才触发；页面加载时safari常延迟应用，第三方库可能重置样式，小程序中则完全不支持该伪类。
input:invalid 为什么经常不生效
浏览器只在输入框有 required、type="email" 等校验属性，且用户已失焦或提交后，才真正应用 :invalid。页面刚加载时，空的 required 输入框理论上是无效的，但 Safari 常延迟触发，导致初始红框不出现。
常见错误包括：
• 忘加 required 或校验型 type
• 把提示文字放在 <label></label> 里，而非紧邻 <input> 的兄弟元素
• 使用了第三方 UI 库，它重置了 :invalid 样式，需提高选择器权重，例如：input:invalid:not([type="hidden"])
用 peer-* 实现错误提示显隐
必须满足三个硬性条件，peer 才能工作：
• <input> 和错误提示元素（如 <p></p>）同属一个父容器
• 提示元素在 <input> 的 DOM 顺序之后
• <input> 上带 peer 类
正确结构示例：
<div class="relative"> <br><input type="email" required class="peer border border-gray-300 ..."><br><p class="mt-1 text-sm text-red-600 opacity-0 peer-invalid:opacity-100">邮箱格式不正确</p> <br> </div>
注意：
peer-invalid 不会响应 JS 设置的自定义校验失败，此时得改用 peer-data-[invalid] 配合 element.dataset.invalid = "true"。禁用态与错误态别混用
disabled: 是 Tailwind 的状态修饰符，专用于 HTML disabled 属性；而 :invalid 是原生伪类，依赖 validity API。两者触发机制、可访问性含义完全不同：
- 禁用输入框应加
disabled:opacity-70 disabled:cursor-not-allowed，否则用户点不动还看不出为啥 - 错误态必须配
aria-invalid="true"和aria-describedby指向提示 ID，否则屏幕阅读器无法感知 - 别给
disabled输入框加:invalid样式——它不会匹配，因为禁用元素永远不参与校验
小程序里 :invalid 根本不解析
微信小程序的 WXSS 解析器直接忽略含冒号的选择器，input:invalid 这种写法会被跳过，不是样式没生效，是压根没被识别。
解决方案只有两个：
• 改用 class 控制：JS 校验后手动加 error 类，CSS 写 .input.error { border-color: #d32f2f; }
• 或引入 weapp-tailwindcss 插件，但它只转换类名，不解决伪类缺失问题——:invalid 在小程序里就是不可用，必须放弃
真正容易被忽略的是：哪怕你用 Vue + Taro 开发，H5 端一切正常，真机调试时 :invalid 依然静默失效。这不是配置问题，是平台限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
