:default伪类仅匹配HTML初始声明的默认项，不响应form.reset()等运行时状态变化；应改用data-default属性配合reset事件监听实现可重置的默认样式。
:default 伪类只标识 HTML 初始写死的默认项，不是“当前默认”或“重置后恢复的默认”，它不响应运行时变化——所以它不能帮你动态识别默认状态，只能告诉你“谁一开始就被 checked 或 selected 了”。
为什么 :default 在 form.reset() 后完全失效
浏览器把 :default 当作一次性的 HTML 属性快照：只在解析 DOM 时检查 checked、selected 这类初始属性，之后无论 JS 调用 form.reset() 还是用户手动切换，都不会重新触发匹配逻辑。
-
input[type="radio"]:default只在页面加载时匹配带checked属性的那个元素；reset 后即使它又变回选中，也不会再被:default选中 -
option:default在 Safari 中根本无效，Chrome/Firefox 对的支持也极不稳定，基本不可靠 -
button:default不代表“表单提交按钮”，现代浏览器已弃用该语义，实际几乎不触发
:default 和 :checked/:selected 的本质区别
这不是兼容性问题，而是设计意图完全不同：:default 回答“谁被写死在 HTML 里”，:checked 回答“谁此刻被选中”。两者在 reset 前后表现割裂：
- 初始时：
同时匹配:default和:checked - 用户点选其他项后：原项失去
:checked，也失去:default（因不再是初始默认） - 执行
form.reset()后：原项恢复:checked，但:default永远不会回来
真正能响应 reset 的替代方案
纯 CSS 做不到，必须结合 DOM 属性与 JS 监听。关键在于把“默认”从样式层移到结构层：
- 给默认项显式加
data-default属性，例如 - 用属性选择器写样式：
input[type="radio"][data-default] { background: #e6f7ff; }，它不依赖任何状态，只看属性存在 - 监听
form.reset事件，在回调里同步视觉反馈（比如element.classList.toggle("is-default-active")） - 避免用
[checked]或[selected]做样式依据——它们是静态属性，无法区分“原始默认”和“JS 设置的默认”
最容易被忽略的一点：很多人以为 form.reset() 是“回到初始状态”，其实它只是还原控件的 defaultValue / defaultChecked / defaultSelected 所对应的值，而这些值是否触发 CSS 匹配，浏览器根本不关心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
