button[type="submit"]:default样式不生效，因为:default伪类仅匹配控件初始选中状态，不响应默认提交行为；现代浏览器均不将其应用于submit按钮，可靠方式是使用data-default属性配合属性选择器。
button[type="submit"]:default 样式为什么完全不生效？
因为浏览器根本不把 button[type="submit"] 的“默认提交行为”当作 :default 的匹配条件。它只响应控件的「初始选中状态」，不是「表单默认触发行为」。哪怕你写了 form button[type="submit"]:default，样式永远不会应用——Chrome、Firefox、Safari 均不将任何 submit 按钮视为 :default 目标。
哪些元素真正支持 :default？
:default 实际只在以下场景有微弱存在感：
-
<input type="radio">或<input type="checkbox">带checked属性时（初始渲染阶段） -
<button>元素——仅当浏览器 UA 显式认定其为「初始默认按钮」，但现代浏览器基本已弃用该逻辑 -
<option>：理论上支持，但所有主流桌面浏览器（截至 2026 年 6 月）均不生效；select option:default在 DevTools 中根本看不到匹配规则
它**完全不适用于** input[type="submit"]、button[type="submit"]、select、textarea 等常见表单控件。
怎么可靠地标记默认提交按钮？
别依赖伪类，用显式属性 + 属性选择器：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中给默认按钮加
data-default属性：<button type="submit" data-default>确认提交</button> - 对应 CSS 写成：
button[type="submit"][data-default] { outline: 2px solid #2196f3; } - 避免用
:first-of-type或:nth-child(1)——DOM 顺序易变，且input[type="submit"]和button[type="submit"]是不同元素类型，无法统一匹配 - 后端模板渲染时直接注入
data-default，比 JS 运行后再 patch 更稳定
:default 和 [selected]/:checked 的关键区别在哪？
这是最容易混淆的点：
-
:default是静态快照：只回答「谁最初被写死在 HTML 里」，不随 JS 或用户操作更新 -
[selected]是属性存在性：只要 HTML 中写了selected，就一直匹配，哪怕 JS 清掉该属性也不会失效 -
:selected是实时状态：只反映当前 UI 上哪个<option>被选中，会动态变化
想高亮「页面加载时那个该被点的按钮」，就得靠人工标记，没有自动魔法。把 :default 当作实时指示器，只会浪费调试时间。
