CSS如何使用-default获取默认选项样式_通过状态伪类突出预选表单项

:default伪类不适用于select的option元素，仅对button、radio、checkbox的初始默认状态有效；应改用option[selected]属性选择器来可靠高亮预设选项。为什么 :default 伪类几乎不生效因为浏览器对 :default 的支持非常有限------它只在原生表单控件中对「用户未手动切换过」的初始选中项起作用，且仅限于 <button>、<input type="radio">、<input type="checkbox">，**完全不适用于 <select> 的 <option>**。很多开发者误以为给 <option selected> 加 :default 就能高亮默认项，结果样式根本没应用。常见错误现象：select option:default { background: #ffeb3b; } 在 Chrome/Firefox/Safari 中全部无效；控制台也看不到匹配的样式规则。:default 不是"有 selected 属性就匹配"，而是"由 UA（浏览器）决定哪个控件当前处于初始默认状态"对于 <select>，浏览器不把 selected 的 <option> 视为"默认控件"，所以不触发 :default即使你用 JS 动态设置 select.value = 'xxx'，也不会让对应 <option> 匹配 :default想突出预选的 <option>？用 selected 属性 + CSS真正可靠的方式是直接利用 HTML 属性选择器，而不是依赖语义模糊的伪类。只要选项带有 selected 属性（无论是否被 JS 修改过），就能稳定命中。使用场景：表单加载后需要视觉强调用户还没动过的初始选项，比如「请选择城市」作为占位符不加 selected，而真实默认项如「北京」带 selected，就该高亮它。立即学习"前端免费学习笔记（深入）"；写法：select option[selected] { background: #e3f2fd; color: #1976d2; }注意：必须用 [selected]，不是 :selected（后者是当前被选中的状态，会随用户操作实时变化）兼容性：所有现代浏览器都支持，包括 IE9+性能无影响：属性选择器和伪类一样是 CSS 引擎原生处理的:selected 和 [selected] 的关键区别在哪这是最容易混淆的点。:selected 是运行时状态，[selected] 是静态属性存在性------哪怕你用 JS 清掉 selected 属性，只要 DOM 上曾经写过，[selected] 就不会回退；而 :selected 永远只反映当前 UI 选中项。 Zeemo AI 一款专业的视频字幕制作和视频处理工具