:optional不能直接匹配未声明required的input，因为它只匹配显式声明过required属性后又被移除的元素，而非默认可选字段；原生HTML中未写required的input、select、textarea默认不被:optional选中，需改用[required]反向选择或类名控制。
为什么 :optional 不能直接匹配 input[type="text"]？
浏览器只把 required 属性作为必填判定依据，:optional 并非“没有 required 就生效”，而是“显式声明为可选但未被标记为必填”的元素才匹配——实际上，它只对有 required 属性的表单控件有意义。普通 input、select、textarea 默认就是可选的，不带 required 时根本不会被 :optional 选中。
-
:optional只作用于有required属性但被移除后仍保留“可选语义”的元素（比如某些框架动态切换属性） - 原生 HTML 中，没写
required的input不属于:optional匹配范围 - 想给所有非必填项加
(选填)，得换思路：靠属性存在性或类名控制，而不是依赖:optional
用 [required] 反向选择 + ::after 更可靠
真正可行的做法是：默认所有字段都显示 (选填)，再用 [required] 把必填项的标注隐藏掉。这样逻辑清晰、兼容性好，且不依赖 JS。
label::after { content: " (选填)"; }<br>label[required]::after,<br>label > input[required] + span::after { content: ""; }- 注意选择器要覆盖到实际 DOM 结构：如果
input在label内，用label[required]::after；如果label和input是兄弟关系，建议给label加required属性或统一用类名 - 避免用
input:not([required])后加伪元素，因为input自身无法容纳::after（除非设为display: inline-block，但会破坏布局）
遇到 type="checkbox" 或 type="radio" 怎么办？
这类控件即使没 required，语义上也常是“可选不填”，但用户可能误以为必须选一个。此时标注位置和逻辑要调整：
- 不宜在
input后直接加(选填)，容易和选项文字混淆 - 推荐统一把标注放在
fieldset或legend旁：legend::after { content: " (选填)"; }<br>fieldset[required] legend::after { content: ""; } - 如果用
label包裹单个checkbox，可用label:not([required])::after，但需确保label是块级或设置了position: relative，否则::after可能错位
IE11 和旧版 Safari 对 :optional 的支持很有限
:optional 在 IE11 完全不支持，Safari 9.1–12.0 仅部分支持（select 和 textarea 可能失效）。哪怕你真想用它，也要加降级：
立即学习“前端免费学习笔记（深入）”；
- 不要用
:optional做核心功能判断，只作增强 - 所有标注逻辑优先走
[required]或.required类控制 - 如果必须用
:optional，务必搭配@supports (selector(:optional))做包裹，否则旧浏览器会忽略整条规则
真实项目里，靠属性或类名驱动样式比依赖伪类更可控。标注是否显示，本质是数据状态问题，CSS 只负责表达，别让它承担逻辑判断。
