:optional伪类仅匹配未声明required属性的原生input（非hidden等类型）、textarea、select元素；checkbox/radio默认即为optional，而hidden、button、output及自定义组件不响应。
:optional 伪类不会匹配“没写 required”的字段，它只匹配本该支持 required 但确实没加该属性的原生表单控件——而且必须是未被 JS 动态干预过的初始状态。
哪些元素能被 :optional 真正选中？
只有三类原生表单元素在满足条件时才会响应 :optional：
-
<input>（类型不能是hidden、image、submit、button等） <textarea></textarea><select></select>
以下情况一律不匹配：
-
<input type="hidden">—— 规范明确排除 -
<input type="checkbox">或<input type="radio">默认就是:optional，哪怕没写required，但加了也不会变:required -
<button></button>、<output></output>、自定义 Web Component —— 完全无响应 <div required> —— 属性无效，伪类不生效<h3> <code>:optional样式为什么没生效？常见原因最常踩的坑不是写错选择器，而是 HTML 本身就不符合匹配前提：
立即学习“前端免费学习笔记（深入）”；
- 写了
required=""或required="false"—— 只要属性存在（哪怕值为空或布尔 false），就匹配:required，跳过:optional - 用 React/Vue 的
:required="false"绑定 —— 渲染后仍是required属性，浏览器照认 - JS 执行了
el.required = false或el.removeAttribute('required')后样式才更新 —— 初始 HTML 没移除属性，:optional不触发 - 用了
aria-required="false"—— 对:optional完全无影响
验证方法：打开 DevTools，看元素上是否**真的没有**
required属性（连空属性都不行）。怎么安全地给非必填项加 (选填) 文字标注？
:optional本身不适合直接加::after标注，因为：-
input元素无法容纳::after（除非设display: inline-block，但易破坏布局） - 多数非必填字段根本没写
required，压根不进:optional匹配范围
更可靠的做法是反向控制：
- 默认所有
label后加(选填)：label::after { content: " (选填)"; } - 再用
[required]把必填项的标注清掉：label[required]::after, label > input[required] + span::after { content: ""; } - 如果结构是
label包裹input，确保label是块级或有position: relative，否则::after定位可能偏移
注意：不要用
input:not([required])::after——input无法渲染伪元素，且会错误匹配到button等非表单元素。样式细节和兼容性底线
真正容易被忽略的是视觉与语义的同步问题：
- 别用
opacity弱化:optional字段 —— 它会同时压暗文字、边框、背景，对比度可能跌破 WCAG 4.5:1 - 必须显式声明
::placeholder样式：input:optional::placeholder { color: #999; }，否则 placeholder 颜色不变 - IE 完全不支持
:optional；Safari ≤15.4 在<fieldset></fieldset>内偶有失效，建议外层加 wrapper 并用[required]降级 - Shadow DOM 中的
:optional不会穿透，组件内样式需定义在:host或用part/::part()
最危险的场景是：后端强制校验某个字段，前端却漏标
required—— 这时:optional会错误应用弱化样式，用户可能真就跳过了。- 写了
