:default伪类无法可靠高亮默认选项，因它匹配UA认定的初始默认控件而非HTML中selected/checked属性；应改用option[selected]、input:checked等属性选择器，兼容性好且语义明确。
:default 伪类基本不能可靠高亮“默认推荐选项”——它不是为这个目的设计的，浏览器支持极差，且行为与你的预期完全相反。
为什么 :default 在表单中几乎不生效
它只在页面首次渲染时，对 HTML 中显式带 checked 或 selected 属性、且用户尚未手动切换过的 <input type="radio"> 或 <input type="checkbox"> 偶尔匹配；<option></option> 在 Safari 完全无效，Chrome/Firefox 也极不稳定；<button></button> 更是现代浏览器普遍无视。这不是 bug，是规范本意：它匹配的是“UA 认定的初始默认控件”，不是“你写的 selected”。
option[selected] 才是下拉框默认项的可靠写法
想高亮 HTML 里写死的默认选项（比如 <option value="shanghai" selected>上海</option>），直接用属性选择器：
select option[selected] {
background-color: #e3f2fd;
color: #1976d2;
font-weight: 500;
}
- 所有现代浏览器（含 IE9+）都支持，无兼容性风险
- 它只看 DOM 上是否存在
selected属性，不关心 JS 是否改过状态 - 和
option:selected严格区分：:selected是运行时当前选中项，会随用户操作实时变化；[selected]是静态标记，稳定可预测
radio/checkbox 默认项别用 :default，用 :checked 更直接
只要你在 HTML 里写了 checked，:checked 就能立刻生效，且 reset() 后自动恢复：
input[type="radio"]:checked + label {
color: #1976d2;
font-weight: 600;
}
-
:checked兼容性更好（IE9+），语义清晰：此刻被选中 - 不用管“是否初始”或“是否被点过”，只要属性存在、状态为真，样式就上
- 避免把逻辑绕到
:default，后者在 Firefox 有已知不匹配 bug，Safari 直接不支持
需要响应 form.reset()？必须靠 data-default + JS
:default 对 reset() 完全无感——它不重新触发，也不重匹配。真要同步重置后的视觉状态：
- 给默认项加
data-default属性：<input type="radio" name="city" value="beijing" checked data-default> - 用
input[data-default]写样式，它不依赖任何状态变化 - 监听
form.reset事件，在回调里手动更新 class 或 aria 状态（例如el.classList.add('is-reset-default')）
最常被忽略的一点是：reset() 只还原控件的 defaultValue 和属性值，不会让浏览器回退到“初始渲染快照”——而 :default 正是绑定在这个早已消失的快照上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
