:default伪类仅匹配html中显式声明checked或selected属性的元素，且仅在首次渲染时生效，不响应js修改或form.reset()。
为什么 :default 基本无法可靠选中“默认选中项”
它不是“当前被选中”或“应该被高亮”的逻辑，而是浏览器在首次渲染时对 HTML 属性的一次性快照。只要没写 checked 或 selected 属性，:default 就不会匹配；哪怕你用 JS 设置了 element.checked = true，它也永远不生效。Safari 完全不支持 option:default，Chrome/Firefox 对 select 中的 option 也基本不触发——这不是 bug，是规范设计如此。
:default 实际能生效的场景非常有限
仅以下情况可能看到效果（且需严格满足条件）：
-
<input type="radio" name="x" value="a" checked>—— 必须带checked属性，且页面加载后用户尚未切换过 -
<input type="checkbox" checked>—— 同样依赖 HTML 属性，多个可同时匹配 -
<button type="submit"></button>—— 现代浏览器几乎不认定任何 button 为:default，别指望它高亮默认提交按钮 -
<option selected></option>—— 在 Chrome/Firefox 中偶有反应，但 Safari 17 及更早版本完全无视，不能用于生产环境
真正能响应 form.reset() 的替代方案
:default 对 form.reset() 完全无感，因为 reset() 只还原控件的 value、checked、selected 属性值，不会重新触发伪类匹配。可靠做法是把“默认”语义从 CSS 移到 DOM：
- 给默认项加
data-default属性：<input type="radio" name="x" value="a" checked data-default> - 用属性选择器写样式：
input[type="radio"][data-default] { background: #e6f7ff; } - 监听
form.reset事件，在回调里手动同步状态（比如 toggle class 或更新aria-selected） - 避免用
[selected]或[checked]做样式依据——它们是静态属性，无法区分“初始默认”和“JS 后设”
更简单、更通用的写法：直接用 :checked 和 [selected]
绝大多数场景下，你真正想要的不是“谁最初被写死”，而是“谁此刻该被视觉强调”。这时：
- 单选/复选框用
:checked—— 它实时反映当前状态，兼容性好，reset() 后自动恢复 -
select的默认选项用option[selected]—— 只要 HTML 里写了selected，样式就稳定生效，所有现代浏览器都支持 - 别混淆
:selected（运行时状态）和[selected]（属性存在性）：前者随用户操作变化，后者只看你有没有写这个属性
最常被忽略的一点是：很多人以为 form.reset() 是“回到初始状态”，其实它只是还原控件的 defaultValue 属性值，而 :default 连这个还原过程都不参与。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
