在表单中，:required 和 :optional 是两个用于根据表单元素是否设置“必填”属性来应用样式的 CSS 伪类。它们帮助开发者通过视觉方式提示用户哪些字段必须填写，哪些是可选的。
:required 伪类
这个伪类匹配所有设置了 required 属性的表单控件。也就是说，只要 HTML 中某个输入框有 required 属性，它就会被 :required 选中。
- 适用于
、、等表单元素 - 常用于给必填项添加边框颜色、背景或提示符号
- 示例：高亮必填项为红色边框
:optional 伪类
这个伪类匹配那些**没有**设置 required 属性的表单元素。换句话说，它是 :required 的反义。
- 只有当元素未声明 required 时才会生效
- 适合用来区分可选项的样式，比如降低视觉权重
- 注意：即使字段为空，只要没加 required 属性，仍会被 :optional 匹配
实际使用建议
这两个伪类配合使用可以提升表单的可用性。
立即学习“前端免费学习笔记（深入）”；
- 用 :required 标记关键字段（如姓名、邮箱）
- 用 :optional 淡化非必要字段（如备注、附加信息）
- 避免滥用 required，否则会削弱 :required 的视觉意义
- 结合 placeholder 或标签说明，增强可访问性
