:optional伪类仅匹配未声明required属性的表单元素，依赖原生HTML属性而非JS或ARIA；正确写法为不加required，错误写法包括required="false"或依赖class/aria；需注意与:required权重一致、排除disabled/readonly干扰，并为旧浏览器提供JS兜底。
怎么用 :optional 伪类给选填字段加样式
直接生效的前提是：表单控件本身没有 required 属性，且浏览器原生支持 :optional（Chrome 10+、Firefox 4+、Safari 15.4+、Edge 79+）。它只匹配那些“未被标记为必填”的 <input>、<select>、<textarea> 元素，不看 JS 或后端逻辑——只看 HTML 属性有没有 required。
常见错误是以为加了 aria-required="false" 或 class 名如 is-optional 就能触发 :optional，其实完全无效。它只认原生 required 属性是否存在。
- ✅ 正确写法：
<input name="phone">→ 匹配:optional - ❌ 错误写法：
<input name="phone" required="false">→ 这个属性值无效，required是布尔属性，只要出现就代表必填，哪怕写成required="false"也照样被当成必填项 - ⚠️ 注意：
<input name="phone" required>和<input name="phone" required="">效果完全一样，都会被:required匹配，而被:optional排除
:optional 和 :required 的样式冲突怎么避免
两者互斥，但容易因 CSS 优先级或覆盖顺序出问题。比如你写了 input:required { border: 2px solid red; }，又写了 input:optional { border: 1px dashed #999; }，结果所有输入框都显示红色边框——那大概率是 :required 规则在后面，或者用了更具体的选择器（比如 form input:required）导致权重更高。
- 确保两个伪类规则的权重一致，例如都用
input:optional和input:required - 不要混用 ID 或多层嵌套选择器来写其中一个，否则会破坏对称性
- 如果表单里有部分字段靠 JS 动态增删
required属性，记得触发表单重绘（比如el.toggleAttribute('required')后，样式会自动更新，无需手动 force reflow）
为什么 disabled 或 readonly 字段不匹配 :optional
:optional 只关心“是否被声明为必填”，和字段当前是否可用无关。一个 <input disabled> 如果没写 required，它依然匹配 :optional；反过来，一个 <input required readonly> 虽然不能编辑，但它仍匹配 :required，不匹配 :optional。
立即学习“前端免费学习笔记（深入）”；
这容易导致视觉误导：比如你想给“可编辑的选填项”加浅灰底色，但忘了排除 :disabled，结果禁用字段也带上了样式。
- 安全写法：
input:not(:disabled):optional { background-color: #f9f9f9; } - 别依赖
:optional来判断字段是否“真正可选”，它只是 HTML 层面的声明状态 - 如果业务上需要区分“用户可跳过”和“字段当前不可操作”，得结合 JS 判断
el.hasAttribute('required')和el.disabled两个条件
兼容旧浏览器时怎么兜底
IE 完全不支持 :optional，iOS Safari
- 最简兜底：给所有选填字段加统一 class，比如
class="field-optional"，再用.field-optional写样式 - 自动化方案：页面加载后执行一次
document.querySelectorAll('input:not([required]), select:not([required]), textarea:not([required])').forEach(el => el.classList.add('js-optional'))，然后用.js-optional写样式（注意避开已有的disabled或readonly） - 别用
@supports (selector(:optional))做条件加载——CSS @supports 对伪类选择器的支持度反而更差，不如 JS 检测可靠
真正麻烦的不是写法，而是团队里有人在表单组件里悄悄加了 required={false}（React）或 :required="false"（Vue），以为这样就能让字段变“可选”，结果既没删掉属性，又误导了 :optional 的行为。这种隐式逻辑比样式本身更难 debug。
