:optional 伪类匹配无 required 属性的 input、select、textarea 元素，仅依据原生属性存在与否，不响应 js 动态变更，且不适用于 hidden、button 等无输入语义控件。
什么是 :optional 伪类，它匹配哪些元素
:optional 是 CSS 原生伪类，专门匹配那些在 HTML 中**没有 required 属性**的 <input>、<select></select>、<textarea></textarea> 元素。它不看 aria-required 或 JS 校验逻辑，只认原生 required 属性是否存在。
注意：它不会匹配 type="hidden"、type="button" 等无用户输入语义的控件，也不会因 disabled 或 readonly 改变匹配结果。
如何用 :optional 添加视觉提示（比如「（选填）」文字）
不能直接用 :optional::after 给 <input> 插入内容——因为表单控件是替换元素（replaced element），::before/::after 在大多数浏览器中无效。
可行做法是把提示文字放在标签或旁边容器里，并用属性选择器联动控制显隐：
label > input:optional + .optional-indicator {
opacity: 0.7;
font-size: 0.85em;
}
<p>/<em> HTML 结构示例 </em>/
<label>
邮箱
<input type="email"><span class="optional-indicator">（选填）</span>
</label></p>
更稳妥的方式是结合 [required] 反向控制：
- 默认显示「（选填）」
- 用
label > input[required] + .optional-indicator { display: none; }隐藏必填项的提示
为什么不用 :not(:required) 替代 :optional
看起来等价，但行为有差异：
-
:optional仅由 HTML 属性决定，语义明确 -
:not(:required)会匹配没有required属性的元素，但也匹配required="false"这种非法写法（HTML 规范中required是布尔属性，不接受值） - 某些旧版 Safari 对
:not(:required)的解析不稳定，而:optional兼容性更好（Chrome 45+、Firefox 47+、Safari 9.1+、Edge 79+）
所以优先用 :optional，语义准、兼容稳、意图清。
容易被忽略的边界情况
:optional 不会响应运行时 JS 动态增删 required 属性的变更——部分浏览器（如旧版 Firefox）需要重排或强制触发样式刷新才能更新匹配状态。
如果页面有动态表单逻辑，建议：
- 避免依赖
:optional做关键交互反馈（比如禁用提交按钮） - 用 JS 监听
input.required的变化，同步切换自定义 class（如.is-optional） - 对无障碍支持，别只靠视觉提示；确保
<label></label>文本本身或aria-describedby明确说明可选性
真正在意可访问性时，CSS 伪类只是辅助，HTML 结构和 ARIA 才是底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
