<select>不支持:checked伪类，因<option>无checked状态；跨浏览器控制选中项样式必须用JavaScript监听change事件动态添加class，或完全自定义下拉组件。
下拉框 <select> 本身不支持 :checked
这是最常踩的坑：直接对 <select> 或它的 <option> 写 option:checked { ... } 在绝大多数浏览器里完全无效。因为 <option> 不是表单控件级可“选中”的元素（它没有独立的 checked 状态），真正的选中状态只反映在 <select> 的 value 属性上，且 :checked 伪类仅适用于 <input type="radio"> 和 <input type="checkbox">。
真正能生效的选中项样式控制方式
浏览器对 <option> 的样式支持极其有限，仅允许部分 CSS 属性（如 color、background-color），且仅在下拉展开时生效；而选中项（即当前显示在 select 框里的那一项）无法用纯 CSS 单独定位 —— 它没有对应的伪类或属性选择器。
-
option:hover可以改悬停高亮色，但不是“已选中” -
select:focus option[value="xxx"]这类写法不能代表“当前被选中的项”，只是匹配某个值的 option，和实际选中状态无关 - Chrome / Edge 允许用
option:checked，但这是非标准行为，Firefox 完全忽略，Safari 表现不稳定，**不可依赖** - 真正跨浏览器可控的方式只有 JavaScript 驱动：监听
change事件，读取select.value，再动态加 class 到对应option（仅用于下拉展开时的视觉提示），或更新外层容器样式
如果非要“模拟”选中项高亮，得靠 JS + 自定义下拉
原生 <select> 的渲染由操作系统或浏览器 UI 控件接管，CSS 几乎无法穿透。想精确控制“已选中项”的字体、背景、图标等，必须放弃原生组件，用 <div> + <ul> + <li> 重构下拉逻辑，并用 class 标记当前选中项：
.custom-select .options li.selected {
background-color: #007bff;
color: white;
font-weight: bold;
}
此时 .selected 类由 JS 在用户点击后手动切换，:checked 完全不参与。
立即学习“前端免费学习笔记（深入）”；
为什么别硬套 :checked 到 <option>
这个误解常源于把 <option> 和 <input type="radio"> 混为一谈。它们语义不同：<option> 是数据选项容器，不是独立控件；checked 是 input 的布尔属性，而 <option> 只有 selected 属性（且是反射属性，不触发伪类）。
- 写
option:checked在 Firefox 中静默失败，在 Safari 中可能报 warning - 即使 Chrome 看似生效，一旦用户用键盘操作（如方向键切换），
:checked状态不会同步更新 - 无障碍（a11y）支持会严重受损，屏幕阅读器无法正确播报当前选中值
真要改选中效果，要么接受浏览器默认行为，要么彻底自定义下拉组件 —— 中间路线不存在。
