:required 伪类可直接选中带 required 属性的原生表单控件（如 、、），不依赖 name 或 id，仅检测属性存在性；它不适用于自定义组件、伪元素、type="hidden" 等非交互控件，且需注意优先级、拼写、无障碍及视觉提示的多重实践要求。

怎么用 :required 选中必填的

直接写 input:required 就能命中所有带 required 属性的 元素，包括 type="text"、type="email"、type="number" 等。它不依赖 name 或 id，只看 HTML 属性是否存在。

注意：这个伪类只对原生表单控件生效，比如 、、；自定义组件（如 React 封装的 Input）不会自动继承该行为，除非你手动把 required 属性透传到底层 。

• 支持所有现代浏览器（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 的 是 :optional；但 即使写了 required，也会被忽略校验，且 :required 也不匹配它 —— 因为规范明确排除了 type="hidden"、type="reset"、type="button" 等不可交互类型。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• :required 匹配的是「被声明为必填且参与约束验证」的控件
• input[type="hidden"]:required 永远不会匹配任何元素
• 如果表单里混用了 和 ，后者仍会被视为必填（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"（对 可省略，但对
  等非表单控件必须显式加）
• 视觉标记建议加在标签上，比如 label:has(input:required)::after { content: " *"; color: #e53e3e; }（注意 :has() 兼容性：Chrome 105+、Safari 15.4+、Firefox 121+）
• 别只用颜色区分：红/绿色盲用户可能无法识别，建议叠加图标、文字或粗体等多维提示
• 提交失败后，再用 :invalid:required 加强错误状态，而不是只依赖初始的 :required

真正难的不是选中必填框，而是让所有人——无论怎么看、怎么听、怎么操作——都清楚哪里不能空着。