:optional伪类未生效是因为required属性仍存在于dom中，哪怕值为空或为false；必须彻底移除该属性，且需确保css权重与:required对等、排除disabled/readonly干扰，并为旧浏览器提供js兜底。
:optional 伪类没生效，先检查 required 属性是否真的不存在
浏览器只认 required 属性是否存在，不看值、不看 JS 逻辑。哪怕写成 required="" 或 required="false"，只要属性在 DOM 上存在，就匹配 :required，完全跳过 :optional。
-
<input name="phone">→ ✅ 匹配:optional -
<input name="phone" required>→ ❌ 匹配:required -
<input name="phone" required="">→ ❌ 同上，空字符串也生效 -
<input name="phone" aria-required="false">→ ❌aria-required不影响伪类
React/Vue 中动态控制时，别用 required={false}，要用 el.toggleAttribute('required', false) 或直接移除属性。
:optional 和 :required 样式互相覆盖，本质是权重不对等
两者本应互斥，但 CSS 权重不一致就会导致一个压倒另一个。比如你写了 input:required { border: 2px solid red; }，又写了 .form input:optional { border: 1px dashed #999; }，后者因多了一个类选择器，权重更高，但实际可能被前者覆盖——因为开发者常误以为“更具体=更优先”，却忽略了特异性计算规则。
- 确保两个规则权重对等：都用
input:optional和input:required，避免一个加父容器类、一个不加 - 不要混用 ID 或深度嵌套：
#form input:optional权重远高于input:required，破坏互斥前提 - 用 Chrome DevTools 查看 Styles 面板里带删除线的属性，悬停看 specificity 四元组（如
0,0,1,1），确认哪条赢了
disabled 字段意外匹配 :optional，造成视觉误导
:optional 只关心是否声明为必填，和字段是否可用无关。一个 <input disabled> 如果没写 required，它依然匹配 :optional —— 这会导致你给“可编辑选填项”加的浅灰背景，也出现在禁用字段上，显得逻辑混乱。
- 安全写法是显式排除：
input:not(:disabled):optional - 别忘了
:readonly字段同样不受影响，如需区分，得额外加:not(:readonly) - 如果样式依赖
opacity（比如opacity: 0.7），会同时压暗文字、边框、背景，在浅色主题下反而降低可读性；改用组合控制：color: #666+border-color: #ddd+background-color: #f9f9f9
旧浏览器不支持 :optional，JS 兜底不能只靠 class
Chrome 10+、Firefox 4+、Safari 15.4+、Edge 79+ 原生支持 :optional；IE 和老版本 Safari 完全不识别。想兼容，得用 JS 主动判断并加 class，但常见错误是加了 class="optional" 就以为万事大吉。
- JS 判断必须基于
el.hasAttribute('required')，而不是el.required（后者是布尔属性值，受 JS 动态设置影响） - 加 class 后，CSS 规则要同步写成
input.optional，且权重必须与原生伪类规则一致，否则在新浏览器里仍会被覆盖 - 别用
aria-required或自定义 data 属性做判断依据——它们不影响原生伪类，也不该成为兜底逻辑的唯一来源
真正容易被忽略的点是：样式是否在表单结构变化后自动更新。比如用 JS 动态增删 required 属性时，toggleAttribute 会触发浏览器重绘，但手动 setAttribute/removeAttribute 后若未触发 layout 强制刷新，旧样式可能残留。这不是 bug，是 CSS 层叠机制的自然表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
