:invalid伪类失效主因是字段缺乏校验属性或未触发浏览器校验机制；需添加required、type="email"等约束，配合用户交互（提交或blur）才能生效，且需注意css优先级、浏览器兼容性及与:placeholder-shown等伪类配合使用。
如果 :invalid 伪类没起作用，通常不是 CSS 写错了，而是表单字段本身没触发浏览器原生校验机制。关键在于：只有当字段有 校验属性（如 required、type="email"、min/max 等）且值不满足规则时，:invalid 才会生效。
确保字段具备可校验的 html 属性
没有校验约束的输入框，浏览器不会判定它“无效”，:invalid 自然不会匹配。
- 写上
required：比如<input required> - 用语义化
type：如、<input type="url">、<input type="number" min="1"> - 避免
type="text"万能兜底——它几乎不会触发:invalid，除非配合pattern属性（如pattern="[0-9]{3}"）
注意 :invalid 的触发时机
浏览器默认只在用户**提交表单**或**离开字段（blur）后**才开始校验并应用 :invalid。刚打开页面、字段为空但未交互时，很多浏览器（尤其是 chrome）并不会立即标记为 invalid。
- 想“一进页面就高亮必填项”？可加 javaScript 主动调用
checkValidity()或设置reportValidity() - 或用
:user-invalid（Chrome 102+、firefox 119+ 支持）——它会在用户编辑后失焦且校验失败时更及时响应
检查 CSS 优先级和覆盖问题
:invalid 样式可能被其他规则覆盖，特别是重置样式（如 normalize.css）或框架默认样式。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查元素，确认
:invalid是否出现在匹配的规则列表中 - 尝试提高特异性：比如
input:invalid, textarea:invalid, select:invalid，或加!important（临时调试用） - 注意：某些旧版浏览器（如 IE）完全不支持
:invalid，需考虑兼容方案
别忘了 :valid 和 :placeholder-shown 的配合
单独依赖 :invalid 容易误伤空字段。更稳妥的做法是结合状态判断：
- 空字段 + required → 可用
:invalid:not(:placeholder-shown)排除占位符干扰 - 已输入但错误 →
:invalid:valid不成立，直接:invalid即可 - 推荐组合写法：
input:invalid:not(:placeholder-shown)避免初始空状态误标红
基本上就这些。核心就是：有约束、有交互、没被覆盖、浏览器支持。不复杂但容易忽略细节。