:default 仅作用于特定原生控件，需表单含多个 submit 按钮且浏览器按 dom 顺序认定首个为默认项；实际兼容性差，推荐用 class 或 js 控制视觉样式。
:default 确实能标识表单中默认的提交按钮，但它的行为和你直觉想的可能不一样——它不看 type="submit" 属性，也不依赖 HTML 里谁写在前面，而是由浏览器根据 UA（用户代理）策略决定哪个按钮“算默认”。实际开发中，它只在极少数场景下稳定生效。
哪些元素能用 :default？
仅限以下四类原生控件：
-
<button type="submit"></button>（显式声明为 submit 的 button 元素） <input type="submit"><input type="reset">-
<input type="checkbox">或<input type="radio">（当它们有checked属性且未被用户手动切换过）
注意：<input type="button">、<button></button>（无 type）、<select></select>、<option></option> 全都不支持 :default。尤其别试 select option:default，它在所有现代浏览器里都无效。
为什么你的 :default 样式没反应？
常见失效原因：
- 表单里只有一个
<input type="submit">—— 浏览器认为“无需默认”，不触发:default - 用了
<button></button>但没写type="submit"，浏览器按type="button"处理，不参与默认按钮判定 - 通过 JS 动态设置了
form.defaultButton = btn—— 这个 API 不影响 CSS 伪类匹配 - 在 Chrome/Firefox 中测试了
<input type="reset">—— 它虽在规范中被允许，但实际渲染时极少被识别为 default
最可靠验证方式：打开 DevTools → Elements 面板 → 手动选中一个 input[type="submit"] → 看 Styles 面板里是否有 :default 规则被应用（而不是灰掉或划掉）。
怎么写出真正生效的 :default 样式？
必须同时满足三个条件：
- 表单内至少有两个
submit类型按钮（<input type="submit">或<button type="submit"></button>） - 其中**第一个**是浏览器认定的默认项（通常就是 DOM 中第一个）
- CSS 规则写法正确，且没有更高优先级样式覆盖
示例：
form button[type="submit"]:default,
form input[type="submit"]:default {
outline: 2px solid #2196f3;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}
HTML 配套写法：
此时只有「保存」按钮会命中 :default；如果把「另存为」移到前面，它就会变成默认项。
替代方案比 :default 更可控
如果你要确保某个按钮始终有“默认”视觉样式（比如加粗边框、高亮背景），别押注 :default。更稳妥的做法：
- 给目标按钮加自定义 class，如
class="btn-default"，然后写.btn-default样式 - 用
form.defaultButtonJS 属性配合 class 切换（注意：IE 不支持，但现代浏览器都行） - 对表单绑定
keydown监听，检测 Enter 键时高亮当前逻辑默认按钮（需维护焦点状态）
:default 是个语义化标记，不是视觉控制开关。它反映的是浏览器内部的“初始提交意图”，而不是开发者可编程设定的状态。一旦涉及动态表单、多步骤流程或跨浏览器一致性，它就容易掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
