:optional 仅依据 HTML 中是否存在 required 属性判断，不依赖 JS、后端或 ARIA；若 required 属性存在（如 required="" 或 required="false"），则匹配 :required 而非 :optional，故需彻底移除该属性才能使 :optional 生效。
:optional 只认 HTML 里有没有 required 属性，不看 JS、不看后端逻辑、不看 ARIA。只要属性存在（哪怕写成 required="" 或 required="false"），就匹配 :required，完全跳过 :optional。
为什么 :optional 没生效？先检查 HTML 是否“真可选”
常见错误是把 required 当成普通属性来“开关”：比如 React 中写 required={false}，或 Vue 绑定 :required="false" —— 这些都会渲染出 required=""，浏览器照样当必填项处理。
- ✅ 正确写法：
<input name="phone">（彻底不出现required属性） - ❌ 错误写法：
<input name="phone" required="">、<input name="phone" required="false">、<input name="phone" aria-required="false"> - ⚠️ 注意：
input[type="hidden"]、button、output、自定义组件永远不响应:optional，规范明确排除
:optional 和 :required 样式怎么写才不冲突
两者互斥，但 CSS 权重不对等就会覆盖失效。比如你写了 form input:required 却只写 input:optional，前者权重更高，:optional 样式可能被无视。
- 保持选择器层级一致：都用
input:required/input:optional，或都加textarea、select - 别混用 ID 或嵌套太深的选择器，否则破坏对称性
- 动态改属性时（如
el.toggleAttribute('required')），浏览器会自动重绘，无需手动offsetHeight强制刷新
视觉样式容易踩的坑：别只调 opacity
直接写 opacity: 0.7 是最危险的做法——它同时压暗文字、边框、背景，极易让浅色主题下的字段对比度跌破 WCAG 4.5:1。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐组合：
color: #666+border-color: #ddd+background-color: #f9f9f9 - ❌ 避免单独改
color而忽略border-color，否则在白底上根本看不出差异 - ⚠️
::placeholder不继承:optional样式，需单独声明，例如input:optional::placeholder { color: #aaa; }
兼容旧浏览器：IE 完全不支持，得 fallback
Chrome 10+、Firefox 4+、Safari 15.4+、Edge 79+ 都支持，但 IE（含 IE11）零支持。如果项目还要兼容 IE，就得退回到 class 方案。
- 服务端渲染时直接加
class="optional"最稳妥 - 前端补救可用：
document.querySelectorAll('input:not([required])').forEach(el => el.classList.add('optional')) - Safari ≤15.4 在
fieldset内偶有失效，可在外层 wrapper 上用属性选择器兜底，比如fieldset input:not([required])
真正难的是「逻辑必填但 HTML 没标 required」的场景——比如后端强制校验的手机号，前端却漏了属性，这时 :optional 会错误地应用弱化样式。视觉和语义必须同步，否则样式就成了误导源。
