:optional仅匹配原生支持required属性且html中完全未声明该属性的表单元素，包括input（非hidden/image/submit等类型）、textarea、select；input[type="hidden"]被规范排除，checkbox/radio默认为:optional，button/output及自定义组件不响应。
哪些元素能被 :optional 匹配到
:optional 只作用于原生支持 required 属性的表单控件，且该属性**在 HTML 中完全不存在**。它不看 JS、不看 ARIA、不看后端逻辑，只认初始 HTML 是否写了 required。
能匹配的元素包括：
-
<input>（但排除type="hidden"、"image"、"submit"、"reset"、"button"） <textarea></textarea><select></select>
不能匹配的常见情况：
-
<input type="hidden">—— 规范明确排除，加不加required都不触发 -
<input type="checkbox">或<input type="radio">—— 默认就是:optional，除非显式加required -
<button></button>、<output></output>、<div> —— 完全不响应，哪怕你硬加上 <code>required属性也没用required="false"会让:optional失效required是布尔属性，只要出现在标签里，无论值是什么，都等价于required=""，浏览器一律当必填处理。这些写法全部 ❌ 不会匹配
:optional：<input name="phone" required="false">-
<input name="phone" required="{false}">（React/Vue 模板中） <input name="phone" required="">-
<input name="phone" aria-required="false">（ARIA 属性完全不影响）
✅ 正确写法只有一种：
<input name="phone">—— 连空格都不能多一个，否则可能被解析为属性存在。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
:optional和:required的样式冲突怎么避免两者互斥，但 CSS 权重不对等时容易覆盖失效。比如：
input:required { border: 2px solid #e53e3e; } form input:optional { border: 1px dashed #a0aec0; }第二条规则权重更高（多了
form），可能导致所有字段都走:optional样式。推荐做法：
- 两个伪类使用完全对称的选择器，例如都用
input:required和input:optional - 避免混用 ID、嵌套层级或 class 前缀破坏平衡
- 如果动态切换
required状态，用el.toggleAttribute('required')，浏览器会自动重绘，无需手动offsetHeight强制刷新
兼容性和可访问性容易被忽略的点
:optional在 IE 中完全不支持；Firefox 旧版本会默认加opacity: 0.85；Chrome/Safari 无任何默认样式，必须显式声明。真正危险的是语义和视觉脱节：
- 后端强制校验某个字段，但前端 HTML 漏了
required→ 用户看到淡色样式，误以为可跳过 - 仅用
color: #666区分，没改border-color或background-color→ 在深色主题或高对比度模式下完全不可见 - 没排除
:disabled→ 禁用字段也套上:optional样式，造成视觉混淆
最稳妥的做法是：样式只反映 HTML 的
required属性状态，同时确保这个属性和实际业务规则严格同步 —— 否则，:optional就不是辅助，而是误导。
