:required 伪类可直接选中带 required 属性的原生表单控件（如 、、），不依赖 name 或 id，仅检测属性存在性；它不适用于自定义组件、伪元素、type="hidden" 等非交互控件，且需注意优先级、拼写、无障碍及视觉提示的多重实践要求。
怎么用 :required 选中必填的 <input>
直接写 input:required 就能命中所有带 required 属性的 <input> 元素，包括 type="text"、type="email"、type="number" 等。它不依赖 name 或 id，只看 HTML 属性是否存在。
注意：这个伪类只对原生表单控件生效，比如 <input>、<select></select>、<textarea></textarea>；自定义组件（如 React 封装的 Input）不会自动继承该行为，除非你手动把 required 属性透传到底层 <input>。
- 支持所有现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+），IE10+ 也支持
- 不能用在伪元素上，比如
input:required::before合法，但input::before:required无效 - 如果表单用了 JavaScript 动态增删
required属性，CSS 会实时响应，无需手动刷新样式
:required 和 :optional 能不能一起用
可以，而且很实用。比如想统一给必填项加红框、可选项加灰边，就写：
input:required { border-color: #e53e3e; }
input:optional { border-color: #a0aec0; }
但要注意：:optional 并非 :required 的简单取反。一个没写 required 的 <input> 是 :optional；但 <input type="hidden"> 即使写了 required，也会被忽略校验，且 :required 也不匹配它 —— 因为规范明确排除了 type="hidden"、type="reset"、type="button" 等不可交互类型。
立即学习“前端免费学习笔记（深入）”；
-
:required匹配的是「被声明为必填且参与约束验证」的控件 -
input[type="hidden"]:required永远不会匹配任何元素 - 如果表单里混用了
<input required>和<input required="false">，后者仍会被视为必填（HTML 属性是 boolean 类型，值存在即为 true）
为什么加了 :required 样式没生效
最常见的原因是选择器优先级不够，被其他规则覆盖了。比如全局重置里写了 input { border: 1px solid #cbd5e0; }，而你的 input:required 没加 !important，也没提高权重，就会失效。
- 检查是否拼错：是
:required，不是:require或:requires - 确认元素确实渲染出了
required属性（用 DevTools 查看，不要只信 JS 是否调用setAttribute） - 避免和
:invalid混用时逻辑冲突：一个刚加载的必填空输入框，既是:required也是:invalid，若两个规则都设了border-color，后者可能覆盖前者 - Shadow DOM 内部需在组件样式作用域里单独写
:required，不能靠外层样式穿透（除非用::slotted(input:required)且元素确实在 slot 中）
用 :required 做视觉提示时要注意什么
仅靠改变边框颜色不足以满足无障碍要求。屏幕阅读器不会因为 CSS 改变而播报“这是必填项”，用户可能完全不知道哪些字段必须填。
- 必须配合
aria-required="true"（对<input>可省略，但对<div contenteditable> 等非表单控件必须显式加） <li>视觉标记建议加在标签上，比如 <code>label:has(input:required)::after { content: " *"; color: #e53e3e; }（注意:has()兼容性：Chrome 105+、Safari 15.4+、Firefox 121+） - 别只用颜色区分：红/绿色盲用户可能无法识别，建议叠加图标、文字或粗体等多维提示
- 提交失败后，再用
:invalid:required加强错误状态，而不是只依赖初始的:required
真正难的不是选中必填框，而是让所有人——无论怎么看、怎么听、怎么操作——都清楚哪里不能空着。
