:optional伪类生效的前提是元素无required属性，即使required="false"也会匹配:required；弱化可选字段应避免opacity，改用color/border-color/background-color组合，并排除disabled状态。
:optional 伪类生效的前提是 HTML 元素上**没有 required 属性**
浏览器只检查 required 属性是否存在，不关心它的值是不是 "false" 或空字符串。只要属性存在，哪怕写成 required="" 或 required="false"，元素就匹配 :required，完全跳过 :optional。
常见错误包括：
- React/Vue 中用
required={false}渲染 —— 属性仍会被序列化为required，等效于required="" - 服务端模板里写了
required="{{ field.required }}"，结果输出required="False"—— 属性存在即生效 -
aria-required="false"完全不影响:optional匹配逻辑
真正安全的做法只有：彻底移除该属性。最终 HTML 应该是 <input name="phone">，而不是带任何 required 字样的变体。
别用 opacity 弱化可选字段，改用 color/border-color/background-color 组合
直接写 opacity: 0.7 是最典型的视觉陷阱：它会同步压暗文字、边框、背景，导致浅色主题下对比度跌破 WCAG 4.5:1，反而更难读。
更可靠的做法是分层控制：
- 用
color: #666降低文字灰度，但保持可读性 - 同步设
border-color: #ddd，避免边框比文字还显眼 - 加
background-color: #f9f9f9提供轻微视觉分层，不依赖透明度 - 如果要强调“可跳过”，可加
font-style: italic，但慎用于中文（部分字体不支持斜体）
必须单独声明 ::placeholder 样式，且选择器权重需对等
:optional 不会自动继承或影响 ::placeholder；如果你希望占位符文字也弱化，得显式写：
input:optional::placeholder,
textarea:optional::placeholder {
color: #999;
}
否则默认占位符仍是深色，和浅色文字形成割裂。另外注意权重问题：
- 如果全局写了
input::placeholder { color: #333; }，而你只写input:optional::placeholder { color: #999; }，后者可能被覆盖 - 建议统一用相同层级选择器，比如都带
input前缀，或都加!important（仅当必要）
排除 disabled 状态，避免误导用户
禁用字段（disabled）也会匹配 :optional，但你不该把它们一起弱化——禁用字段是不可交互的，可选字段是可填可不填的，语义完全不同。
正确写法是加否定条件：
input:not(:disabled):optional,
select:not(:disabled):optional,
textarea:not(:disabled):optional {
color: #666;
border-color: #ddd;
background-color: #f9f9f9;
}
否则用户看到一个灰掉的输入框，会误以为“这个字段不能填”，而不是“这个字段可填可不填”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
