:default伪类在select的option上完全无效，仅支持button、radio、checkbox；应改用option[selected]属性选择器来可靠高亮预设选项。
:default 在 select 的 option 上根本不起作用
浏览器不支持 :default 伪类匹配 <option></option> 元素——无论你写 select option:default 还是 option:default，Chrome、Firefox、Safari 都不会应用样式，开发者工具里也看不到匹配规则。
原因很直接：规范里 :default 只对 <button></button>、<input type="radio">、<input type="checkbox"> 有效，它描述的是“由用户代理（UA）决定的初始默认控件”，而 <select></select> 的选中逻辑不属于这个范畴。
-
:default不等于 “带selected属性”，也不响应 JS 设置的select.value或option.selected = true - 哪怕你用 JS 动态插入一个带
selected的<option></option>，它也不会触发:default - 试图用
:default做“初始选项高亮”只会白忙一场
想高亮预设的 option？用 [selected] 而不是 :selected
真正可靠的方式是靠 HTML 属性存在性，而不是运行时状态：select option[selected] 才能稳定命中那些在 DOM 中明确写了 selected 的选项。
:selected 是动态的——它随用户操作实时变化；[selected] 是静态的——只要属性写在 HTML 里（哪怕后来被 JS 清掉），它就一直匹配。
- HTML 示例：
<option value="beijing" selected>北京</option>→option[selected]立刻生效 - JS 修改
select.value = 'shanghai'后：:selected切到上海，但[selected]仍指向北京 - 兼容性没问题：IE9+、所有现代浏览器都支持
[selected]
radio 和 checkbox 的“默认”样式该用 :checked
:default 对单选/复选框也极少可用——它只在极少数原生按钮场景下有定义，且行为不可靠。实际开发中，唯一稳定识别“初始选中”的方式是 HTML 里的 checked 属性 + :checked 伪类。
- 必须写成
<input type="radio" checked>，不能靠 JS 后续设置.checked = true -
[checked]不推荐：它会匹配checked="false"这种错误值，而:checked只反映真实状态 - 结构要配合：
input:checked + label要求input紧邻label且在前，否则样式不生效
别混淆 :default、:selected、[selected]、:checked 的语义边界
这几个选择器分属不同维度：:default 是 UA 控制的初始默认控件；:selected 和 :checked 是运行时 UI 状态；[selected] 和 [checked] 是 HTML 属性存在性。混用会导致样式和实际状态脱节。
最常踩的坑是：以为 option:selected 能替代 option[selected] 来标记“初始项”，结果用户一换选项，高亮就跑偏了——因为前者永远跟着当前选中走，后者才真正锚定初始配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
