:required伪类仅对带required属性的原生表单控件（如input、textarea、select）生效，不识别aria-required或自定义组件；需确保属性存在且未被CSS隐藏或优先级覆盖。
怎样让:required真正生效
必须确保对应表单控件（如 <input>、<textarea></textarea>、<select></select>）带有 required 属性，否则 :required 伪类不会匹配任何元素。它不识别 aria-required="true" 或后端校验逻辑。
常见错误是只写 HTML 结构但漏掉属性：
<input type="email"> <!-- ❌ 不会触发 :required --> <input type="email" required> <!-- ✅ 正确 -->
:required能用在哪些元素上
支持范围比直觉中窄：仅对原生支持 required 属性的表单元素有效，包括：
-
<input>（除type="hidden"、"button"、"submit"、"reset"、"image"外） <textarea></textarea>-
<select></select>（需至少一个<option></option>没有selected属性，或显式设required）
<div contenteditable>、自定义 Web Component、<code><input type="file">（虽支持 required，但浏览器行为不一致）等均不可靠。
立即学习“前端免费学习笔记（深入）”；
样式建议与兼容性注意点
:required 在所有现代浏览器中都支持（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+），但要注意：
- 不能和
:invalid混淆：:required只看属性是否存在，不检查当前值是否为空或合法；:invalid才反映实时校验状态 - 慎用
border直接加粗——某些屏幕阅读器用户依赖视觉边框区分必填项，加粗可能干扰其识别节奏 - 推荐组合使用提升可访问性：
input:required + label::after { content: " *"; color: #d32f2f; }
避免仅靠颜色传达“必填”含义，务必配合图标、文字或位置提示。
为什么加了:required却没反应
最常见原因不是语法错，而是：
- 元素被
display: none或visibility: hidden隐藏——伪类仍匹配，但样式不可见 - CSS 优先级被更高权重规则覆盖（比如
input[type="text"]的声明比input:required更具体） - 使用了 Shadow DOM 且未在
::slotted()或:host中正确穿透（:required不自动穿透到 slot 内部） - Vue/React 等框架中，
required属性未正确绑定为布尔属性（例如写成:required="isRequired"但isRequired是字符串"false"）
调试时直接在 DevTools 里检查元素是否带 required="" 属性，再看 computed styles 里 :required 规则是否被列出——没列出，说明选择器根本没匹配上。
