:default伪类仅在Chrome/Firefox中支持，Safari截至2026年仍不支持；它只匹配页面加载时实际初始默认选中的option（由浏览器决定，非selected属性显式存在与否），JS动态设置不会触发重计算，多选时也仅匹配一个初始默认项，需用class回退兼容Safari。
:default 伪类只对 <option></option> 和 <command></command> 元素有效，且仅在浏览器认为该选项“被默认选中”时才匹配——注意：它不依赖 selected 属性是否显式写出，而取决于实际初始选中状态。
为什么 option:default 在某些浏览器里没反应？
Chrome 和 Firefox 支持 :default，但 Safari（截至 2026 年）仍不支持。更关键的是：:default 不匹配 selected 属性存在但被 JS 清除的选项；它只认页面加载后真实处于“初始默认选中”的那个 <option></option>。
- 如果
<select></select>是单选且没有selected属性，第一个<option></option>会被视为默认项，:default可以生效 - 如果用了
multiple，:default依然只匹配初始被选中的那个（哪怕有多个selected），不是全部 - 动态通过 JS 设置
select.value或option.selected = true不会触发:default重计算
如何安全地配合 selected 属性使用 :default？
显式写 selected 是最可控的方式，但要注意：HTML 中多个 <option selected></option> 时，只有第一个被浏览器采纳为“默认”，:default 也只会命中那一个。
<select>
<option value="1">选项1</option>
<option value="2" selected>选项2</option>
<option value="3">选项3</option>
</select>
<style>
option:default {
background-color: #e0f7fa;
font-weight: bold;
}
</style>
这种写法在 Chrome/Firefox 下能稳定高亮“选项2”，但在 Safari 下完全无效 —— 如果必须兼容 Safari，得 fallback 到 class 控制（如 <option class="default"></option>）。
立即学习“前端免费学习笔记（深入）”；
和 :checked、:enabled 混用时要注意什么？
:default 是 UI 状态伪类，优先级与 :checked 相同，但语义不同：一个表示“初始默认”，一个表示“当前被选中”。两者可能同时成立，也可能分离。
- 当用户手动切换选项后，
:default样式仍然保留在原默认项上，而:checked会转移到新选项 -
:default和:disabled可共存（比如默认项被禁用），此时样式会叠加，需注意层叠顺序 - 不要用
:default:disabled做条件判断 —— 它不能替代 JS 的逻辑控制，仅用于视觉提示
真正容易被忽略的点是：:default 的行为高度依赖浏览器对“初始默认”的定义，而不是 HTML 源码里有没有 selected。如果你从服务端渲染时漏掉了这个属性，或者用了框架的受控组件（如 React 的 value prop），:default 很可能根本不会激活。
