:valid 和 :invalid 未生效最常见的原因是表单元素缺少 required、type="email"、pattern 等验证属性，导致浏览器无法判断验证状态。
为什么 :valid 和 :invalid 看起来没生效？
最常见原因是表单元素缺少必要的验证属性，比如 required、type="email"、pattern 等。浏览器只在元素具有可验证语义时才触发这两个伪类。纯 <input type="text"> 没加 required 或其他约束，永远处于“未知验证状态”，既不匹配 :valid 也不匹配 :invalid。
实操建议：
- 确保输入控件有明确的验证依据：比如用
type="email"替代type="text"，或加上required、minlength="6"、pattern="[a-z]{3}" - 注意
:invalid在用户未交互前可能已触发（例如空的required字段加载即无效），如需延迟提示，可结合:user-invalid（Chrome 102+、Firefox 119+ 支持）或 JS 控制 class - 某些自定义组件（如封装的
<my-input>）若未透传原生验证属性，伪类不会作用于内部<input>，需手动绑定或使用part伪元素
:valid 和 :invalid 能作用在哪些元素上？
仅限原生可验证表单控件，包括：<input>（除 type="hidden"、"button"、"submit"、"reset" 外）、<select>、<textarea>。不支持 <form> 自身，也不支持自定义 Web Component 的宿主元素（除非它继承 HTMLFormElement 并实现 checkValidity()）。
典型可用场景：
立即学习“前端免费学习笔记（深入）”；
-
<input type="email" required>—— 输入合法邮箱时触发:valid -
<input pattern="\d{6}">—— 六位数字匹配时为:valid，否则:invalid -
<select required><option value="">请选择</option></select>—— 未选择时为:invalid
如何配合伪元素 ::before/::after 添加视觉反馈？
伪元素不能直接附加到 :valid 或 :invalid 上（CSS 不允许伪类嵌套伪元素），但可以链式组合：先写状态伪类，再加伪元素。注意 <input> 是替换元素，::before/::after 默认不渲染，必须设 content 且配合 position: relative 或使用 display: inline-block 等触发布局。
input:valid {
border-color: #28a745;
}
input:valid::after {
content: "✓";
color: #28a745;
margin-left: 4px;
}
input:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
input:invalid:not(:placeholder-shown)::after {
content: "✗";
color: #dc3545;
margin-left: 4px;
}
关键点：
-
:not(:placeholder-shown)排除 placeholder 显示时的误判（避免用户还没输就显示红叉） -
input上直接用::after需要display: inline-block或父容器设position: relative并对伪元素绝对定位，否则可能不显示 - 更稳妥的做法是把图标放在父容器（如
<div class="input-group">），用.input-group input:valid ~ .icon控制兄弟节点
和 JavaScript 验证状态同步时要注意什么？
CSS 伪类反映的是原生约束验证（constraint validation API）结果，和 JS 调用 setCustomValidity() 或修改 validity 对象强相关。如果 JS 中调用了 input.setCustomValidity("error")，该元素立刻变为 :invalid；设为空字符串则恢复为 :valid（前提是其他约束也通过）。
容易忽略的细节：
-
setCustomValidity()会覆盖所有原生验证结果，哪怕输入内容本身合法（如邮箱格式正确但被 JS 强制设为 invalid） - 调用
reportValidity()会触发浏览器默认气泡提示，并同步更新伪类状态 - 不要在 JS 中反复调用
setCustomValidity("")来“清除”状态——应只在确认合法后设一次空字符串，否则可能干扰用户输入过程中的实时反馈
:placeholder-shown 过滤和 type 属性的缺失。没有这两项，样式要么全时不生效，要么一加载就报错，根本等不到用户输入。 
