:default伪类无法响应form.reset()后的状态，因其仅匹配html初始声明的默认项，而非运行时状态；替代方案是用data-default属性结合js监听reset事件来同步样式。
:default 伪类不能用于表单重置后的状态样式控制——它只响应页面首次渲染时的初始默认项，对 form.reset() 后恢复的状态完全无反应。
为什么 :default 在 reset() 后不生效
浏览器把 :default 视为「初始 HTML 声明快照」，不是运行时状态。调用 form.reset() 会还原表单控件的 value 和 checked/selected 属性值，但不会重新触发 :default 匹配逻辑。
-
input[type="radio"]:default只在页面加载时匹配带checked属性的元素；reset()后即使该 radio 又被选中，只要它是 JS 恢复的（而非原生 HTML 属性），就不会再匹配:default -
option:default在所有主流桌面浏览器（Chrome/Firefox/Safari）中实际无效，Safari 完全不支持，Chrome/Firefox 对<select></select>的:default也基本不触发 -
button:default不代表“表单默认提交按钮”，也不响应reset()—— 它只可能匹配极少数 UA 认定的初始焦点按钮（现代浏览器已弃用此行为）
:default 和 :checked/:selected 的根本区别
这不是兼容性问题，而是语义设计差异：:default 回答“谁最初被写死在 HTML 里”，:checked 回答“谁此刻被用户或脚本选中”。reset() 后，前者不变，后者更新。
-
<input type="radio" name="x" value="a" checked>→ 初始时同时匹配:default和:checked - 用户点选
value="b"→ 原项失去:checked，也失去:default（因不再是初始默认） - 执行
form.reset()→ 原项恢复:checked，但:default不会回来（浏览器不重新解析 HTML 属性）
真正能响应 reset() 的替代方案
靠 CSS 伪类做不到，必须结合 HTML 属性与 JS 监听。核心是：把“默认”语义从 CSS 移到 DOM 结构里，让样式可被重置逻辑驱动。
- 给默认项显式加
data-default属性，例如<input type="radio" name="x" value="a" checked data-default> - 用属性选择器写样式：
input[type="radio"][data-default] { background: #e6f7ff; }，它不依赖任何状态，只看属性存在 - 监听
form.reset事件，在回调里手动同步[data-default]对应项的视觉状态（比如 toggle class 或更新aria-selected） - 避免用
[selected]或[checked]做样式依据——它们是静态属性，reset()后虽存在，但无法区分“原始默认”和“用户后来设的默认”
最常被忽略的一点：很多人以为 reset() 是“回到初始状态”，其实它只是还原控件的 defaultValue 和 defaultChecked/defaultSelected 对应的值，而这些值是否触发伪类，取决于浏览器实现细节——目前没有统一、可靠的方式让 :default 在重置后复活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
