:default仅对radio、checkbox及极少数button有效，select的option上基本无效；应优先使用:checked反映实时状态，预设项用[selected]属性匹配，提交按钮需用data-default等显式标记。
哪些元素上:default能真正生效
只有 <input type="radio">、<input type="checkbox"> 和极少数原生 <button></button> 在特定条件下可能响应 :default；<option></option> 上它基本无效——Chrome/Firefox 偶有渲染，Safari 完全无视，不能用于生产环境。
常见错误现象：select option:default 写了样式却完全不应用，DevTools 的 Styles 面板里压根看不到匹配规则。
根本原因不是浏览器 bug，而是规范定义：:default 描述的是「用户代理（UA）认定的初始默认控件」，而 <select></select> 的选中逻辑不属于这个范畴。
为什么:checked比:default更实用
绝大多数场景下，你真正需要的不是“谁最初被写死”，而是“谁此刻该被视觉强调”。这时 :checked 是更直接、更可靠的选择：
-
:checked实时反映当前 UI 状态，form.reset() 后自动恢复 - 兼容性好（IE9+），无需额外标记或 JS 同步
- 不会因 JS 设置
element.checked = true而失效——它本就为此设计 - 和
:default不同，它不依赖“是否首次渲染”，也不受 UA 判定干扰
示例：input[type="radio"]:checked { background: #2196f3; } —— 用户一点击就变色，reset 后立刻回退，逻辑清晰。
想高亮 HTML 里写的默认项？用[selected]，别碰:default
对于 <select></select> 的预设选项，唯一稳定的方式是靠属性存在性，而不是伪类快照：
- 写
<option value="beijing" selected>北京</option>，再配select option[selected] -
[selected]匹配的是 HTML 属性本身，哪怕之后 JS 清掉它，只要 DOM 初始存在，样式就生效 -
:selected是运行时状态，会随用户切换实时变化，不适合锚定“初始项” - 不要混用：
option:selected永远跟着当前选中走，option[selected]才真正锁定那个被写死的默认值
注意：这个选择器在 IE9+ 全面支持，性能无差异，且不依赖任何 UA 行为。
提交按钮的“默认”别指望:default
button[type="submit"]:default 在所有现代浏览器中都不起作用。浏览器不把 “type=submit” 或 DOM 顺序当作 :default 的触发依据。
可靠做法是人工标记：
- 显式加
data-default属性：<button type="submit" data-default>保存</button> - 用
button[type="submit"][data-default]写样式 - 避免用
:first-of-type或:nth-child(1)——DOM 结构稍一调整就失效
复杂点在于：:default 的语义模糊，而表单交互中“默认”往往指业务逻辑层面的约定（比如后端返回的 defaultAction），必须由开发者显式表达，不能交给浏览器猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
