:default伪类仅对带checked属性的radio/checkbox及部分浏览器中带selected的option有效，button上基本无效；它匹配HTML初始状态而非运行时选中态，应改用[data-default]配合JS维护。
为什么:default在按钮上基本无效
浏览器对 button:default 的支持极弱——Chrome 和 Firefox 已基本弃用该行为，Safari 完全不识别；它本意不是标记“表单默认提交按钮”，而是匹配 UA（浏览器）内部认定的初始焦点按钮，现代标准中这个语义已消亡。直接写 button:default { background: #007bff; } 在绝大多数页面里不会生效。
:default 真正能用的元素只有哪些
目前稳定可用的场景非常有限，仅限于：
-
input[type="radio"]和input[type="checkbox"]：当它们在 HTML 中带有checked属性时，:default可匹配（但仅限首次渲染） -
option元素：带selected属性的项在部分 Chrome/Firefox 中可触发option:default（Safari 仍不支持） -
button基本排除，别浪费时间调试
想高亮“默认选中项”？改用 [data-default] + JS
因为 :default 不响应 form.reset()，也不反映运行时逻辑，“默认”必须由开发者明确定义并维护。推荐做法是：
- 在 HTML 中给默认项显式添加
data-default属性：<input type="radio" name="theme" value="light" checked data-default> - 用属性选择器写样式：
input[type="radio"][data-default] { border: 2px solid #007bff; } - 监听
form.reset事件，在回调中调用form.querySelectorAll('[data-default]').forEach(el => el.checked = true)，确保 DOM 属性与视觉同步 - 避免依赖
[checked]或[selected]做样式——它们无法区分“原始默认”和“用户后来选的”
最容易被忽略的一点：:default 和 :checked 语义完全不同
:default 回答的是“谁被写死在 HTML 里”，:checked 回答的是“谁此刻被选中”。页面加载后用户切换选项，原 :default 元素立刻失去匹配；执行 form.reset() 后它恢复 :checked，但 :default 不会回来——浏览器不会重新解析 HTML 属性。如果你看到某处“生效了”，大概率是巧合（比如没触发 reset、或用了旧版 UA 样式），不可作为方案依据。
立即学习“前端免费学习笔记（深入）”；
