:optional 仅匹配原生支持 required 的表单控件，即 （非 hidden/image/submit/button 类型）、、；checkbox 和 radio 默认匹配，hidden 永不匹配；该伪类仅基于初始 html 属性判断，不响应 js 动态设置。
哪些表单项能被 :optional 选中
只有原生支持 required 属性的元素才可能响应 :optional，包括：input（type 不为 hidden、image、submit、button）、textarea、select。注意：input[type="checkbox"] 和 input[type="radio"] 默认就是 :optional，除非显式加了 required；input[type="hidden"] 被规范排除，永远不匹配；button、output、自定义组件完全无效。
:optional 只看初始 HTML，不认 JS 动态设置
浏览器只在解析 HTML 时读取 required 属性是否存在，之后用 JS 执行 el.required = true 或 el.setAttribute('required', '') 都不会触发 :optional / :required 样式重算。常见翻车点：
- 后端渲染漏掉
required，但前端强制校验 → 页面显示“选填”样式，实际提交必填，用户困惑 - 表单初始化后用 JS 补
required→ 视觉没变化，伪类已锁定初始状态 - 服务端模板未统一处理字段必填逻辑，导致语义（HTML 属性）和业务规则脱节
实用美化写法与避坑细节
别只靠颜色区分，可访问性要求叠加视觉线索：
- 用
border-style: dashed或border-right: 3px solid #999比单纯改color更可靠 - 搭配
::after在 label 后加文字提示，如input:optional + label::after { content: "(选填)"; color: #666; font-size: 0.85em; } - Firefox 旧版会默认给
:optional元素加opacity: 0.85，Chrome/Safari 不会，务必显式声明所有样式，不要依赖浏览器默认 - IE 完全不支持，需 fallback：服务端或加载时用 JS 注入
class="is-optional"，再写对应 CSS
容易被忽略的语义同步问题
真正危险的是「逻辑必填但 HTML 未标 required」——比如后端接口强制校验手机号，前端却没加属性。这时 :optional 会错误应用淡化样式，用户可能跳过填写。样式不是装饰，是语义的视觉映射。只要业务层认定某字段必填，HTML 层就必须有 required 属性，否则美化本身就成了误导源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
