如何用 :optional 伪类匹配非必填输入框
浏览器原生支持 :optional，它能精准选中没带 required 属性的 <input>、<select>、<textarea>。不需要 JS 判断，也不依赖 class 命名约定。
常见错误是以为它匹配「用户没填」的字段——其实完全相反：:optional 只看 HTML 属性是否存在，和用户是否输入无关。
-
<input type="text">→ 匹配（默认 optional） -
<input type="text" required>→ 不匹配 -
<input type="email" required="false">→ 仍匹配（required是布尔属性，有值即生效，"false"不取消它）
淡色样式怎么写才不干扰可访问性
仅调低 opacity 或 color 容易让文字对比度跌破 WCAG 4.5:1 标准，尤其对弱视用户。更稳妥的做法是控制透明度 + 保留足够色阶差。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
input:optional,
select:optional,
textarea:optional {
color: #666;
border-color: #ddd;
background-color: #f9f9f9;
}
- 避免用
opacity: 0.7—— 它会同时削弱文字、边框、背景，进一步降低对比度 - 别只改
color而忽略border-color和background-color，否则在浅色主题下可能看不出差异 - 如果用了自定义字体或深色主题，需同步检查
:optional下的 contrast ratio
:optional 在不同浏览器里的兼容性底线
Chrome 10+、Firefox 4+、Safari 3.1+、Edge 12+ 都支持，但 IE 完全不支持（包括 IE11）。如果你的项目还需兼容 IE，就得 fallback 到 class 手动标记：
- 服务端渲染时加
class="optional" - 或者用 JS 补充：
document.querySelectorAll('input:not([required])').forEach(el => el.classList.add('optional')) - 然后用
.optional替代:optional写样式
注意：Safari 旧版本（≤15.4）对 :optional 在 <fieldset> 内嵌表单中的行为偶有偏差，如遇样式丢失，可尝试在外层加 wrapper 并用属性选择器兜底。
为什么不能用 :not(:required) 替代
表面看语义接近，但实际行为不同：:not(:required) 会匹配所有「没有 required 属性」的元素，包括 <button>、<div> 等非表单控件，导致样式污染。
-
input:not([required])✅ 安全（限定标签 + 属性） -
:not(:required)❌ 危险（伪类不绑定元素类型） -
:optional✅ 最准确（专为表单控件设计的语义化伪类）
真正容易被忽略的是：当表单用到了 Web Components 封装，Shadow DOM 内部的 :optional 不会穿透到外部样式表——这时候必须把样式定义在组件内部，或者用 part + ::part() 控制。
