不支持:checked伪类，因无checked状态；跨浏览器控制选中项样式必须用JavaScript监听change事件动态添加class，或完全自定义下拉组件。
下拉框 :checked
这是最常踩的坑：直接对 或它的 写 option:checked { ... } 在绝大多数浏览器里完全无效。因为 不是表单控件级可“选中”的元素（它没有独立的 checked 状态），真正的选中状态只反映在 的 value 属性上，且 :checked 伪类仅适用于 和 。
真正能生效的选中项样式控制方式
浏览器对 的样式支持极其有限，仅允许部分 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 + 自定义下拉
原生 此时 立即学习“前端免费学习笔记（深入）”； 这个误解常源于把 真要改选中效果，要么接受浏览器默认行为，要么彻底自定义下拉组件 —— 中间路线不存在。 的渲染由操作系统或浏览器 UI 控件接管，CSS 几乎无法穿透。想精确控制“已选中项”的字体、背景、图标等，必须放弃原生组件，用 重构下拉逻辑，并用 class 标记当前选中项：
.custom-select .options li.selected {
background-color: #007bff;
color: white;
font-weight: bold;
}
.selected 类由 JS 在用户点击后手动切换，:checked 完全不参与。
为什么别硬套
:checked 到
和 混为一谈。它们语义不同： 是数据选项容器，不是独立控件；checked 是 input 的布尔属性，而 只有 selected 属性（且是反射属性，不触发伪类）。
option:checked 在 Firefox 中静默失败，在 Safari 中可能报 warning:checked 状态不会同步更新
