:default伪类在现代浏览器中几乎无效，仅可能匹配UA加载时认定的初始焦点按钮，Chrome、Firefox、Safari均已弃用或忽略；应改用data-default等显式属性配合CSS控制默认按钮样式。
:default 伪类在现代浏览器中对按钮的实际控制力极弱，**不能可靠匹配“表单默认提交按钮”**——它只可能匹配极少数 UA（用户代理）在页面加载时自行认定的初始焦点按钮，而这个行为在 Chrome、Firefox、Safari 中均已基本弃用或不一致。你写 button:default 或 input[type="submit"]:default，大概率什么都不会生效。
为什么 button:default 几乎没用？
浏览器并不把 type="submit" 或 formaction 属性当作“默认”的判定依据；:default 的语义是「UA 认定的初始默认操作按钮」，不是「HTML 中第一个 submit 按钮」或「有 form 的 submit 按钮」。实际测试表明：
- Chrome 和 Firefox 对
button:default的支持仅限于极老版本，当前稳定版（2026 年）基本不触发 - Safari 完全忽略
:default在button上的使用 - 即使你给某个
button加了autofocus，它也不会因此匹配:default - 调用
form.submit()或点击后，该按钮也不会“变回”:default状态
替代方案：用 HTML 属性 + CSS 更可控
真正能稳定控制“默认按钮样式”的方式，是主动标记语义：
- 给你想设为默认的按钮加一个明确的属性，比如
data-default：<button type="submit" data-default>提交</button>
- 用属性选择器写样式：
button[data-default] { background-color: #007bff; color: white; } - 如果需支持键盘导航高亮（如按 Enter 触发），可配合
:focus-visible增强可访问性：button[data-default]:focus-visible { outline: 2px solid #0056b3; }
:default 和 :checked/:focus 的本质区别
这不是兼容性补丁问题，而是设计意图不同：
立即学习“前端免费学习笔记（深入）”；
-
:checked回答：“此刻谁被选中？”——运行时状态，JS 设置.checked = true或用户点击都会触发 -
:focus回答：“此刻谁有焦点？”——也是运行时状态，可由 tab 键、click、.focus()触发 -
:default回答：“谁被 UA 在加载时‘钦定’为默认操作按钮？”——静态快照，不可被 JS 修改或重触发
所以别指望用 :default 实现交互反馈或动态样式切换；它只适合极少数遗留 UA 场景，日常开发中应直接绕过。
最容易被忽略的一点：很多开发者查文档看到 “:default matches the default button” 就以为它等价于“表单里最该被点的那个按钮”，但实际它既不响应 form.reset()，也不响应 form.submit()，甚至不响应 button.click() —— 它只是一张加载瞬间的快照，且这张快照在绝大多数浏览器里已经黑屏了。
