:optional 伪类未生效是因为元素存在 required 属性（含空值），必须彻底移除该属性；样式需避免 opacity，改用 color/border-color/background-color 组合；须单独声明 ::placeholder 样式，并确保选择器权重对等。
为什么 :optional 没生效？先确认 HTML 是否“真可选”
浏览器只看 required 属性是否存在，不看值、不看 JS 逻辑。写成 required="false" 或 required={false}（React/Vue 中常见）等于白写——只要属性存在，就匹配 :required，完全跳过 :optional。
必须确保元素上**没有 required 属性**，哪怕一个空格都不行：
-
<input name="phone">→ ✅ 匹配:optional -
<input name="phone" required>→ ❌ 匹配:required -
<input name="phone" required="">→ ❌ 同上，空字符串也生效 -
<input name="phone" aria-required="false">→ ❌aria-required不影响伪类
:optional 样式容易踩的视觉坑
直接用 opacity: 0.7 是最常见错误：它同时压暗文字、边框、背景色，在浅色主题下反而让字段更难读，对比度可能跌破 WCAG 4.5:1。
更安全的做法是组合控制：
立即学习“前端免费学习笔记（深入）”；
- 用
color: #666降低文字灰度，但保留正常对比度 - 同步改
border-color: #ddd，避免边框比文字还显眼 - 加
background-color: #f9f9f9提供轻微视觉分层，别依赖透明度 - 排除禁用状态：
input:not(:disabled):optional，否则disabled字段也会被弱化，造成误导
如何让 :optional 和 :required 样式不打架
两者本应互斥，但 CSS 权重不对等时会覆盖失效。比如你写了：
form input:required { border: 2px solid red; }
input:optional { border: 1px dashed #999; }
结果所有输入框都显示红色边框——因为前者的权重更高（form input 比 input 多一层）。
保持对称才可靠：
- 统一用
input:required和input:optional，不混用 ID 或嵌套选择器 - 如果要用父容器限定范围，两个都加：
.form-group input:required+.form-group input:optional - 动态增删
required属性后（如el.toggleAttribute('required')），样式会自动更新，无需手动触发重绘
placeholder 和伪元素在 :optional 下要显式声明
input:optional::placeholder 不会继承 input:optional 的样式。你写了 input:optional { color: #666; }，但 placeholder 还是默认颜色——因为伪元素需要单独命中。
必须完整写出：
input:optional::placeholder { color: #999; }textarea:optional::placeholder { color: #999; }- Safari 旧版需补前缀：
input:optional::-webkit-input-placeholder - Vue/React 中若用 CSS-in-JS，检查是否意外丢掉了
::placeholder嵌套层级
真正麻烦的不是写法，而是当表单里混着 JS 控制的动态必填逻辑、服务端渲染的初始状态、以及用户交互后的实时校验时，:optional 只管静态 HTML 属性这一层——它不会替你做状态同步。得靠 DOM 属性的真实变更来驱动，其他全是幻觉。
