CSS伪类:default应用_默认选中的表单项样式

:default伪类几乎没反应是因为浏览器支持有限，仅对原生初始默认项生效，且safari完全不支持；应改用class显式标记默认项来确保样式稳定。

为什么 :default 伪类在表单里几乎没反应

因为浏览器对 :default 的支持非常有限，且只作用于「用户未手动切换过」的原生默认选项——不是你写个 selected 或 checked 就算数，而是得靠浏览器在渲染时自动认定哪个是初始默认项。

• 只有 <button></button>、<input type="radio">、<input type="checkbox"> 和 <option></option> 支持该伪类，<select></select> 或 <textarea></textarea> 不行
• <option selected></option> 确实能触发 :default，但一旦 js 执行过 selectElement.value = ... 或用户点选过其他项，样式立即失效（哪怕再切回原值）
• chrome / edge 支持较稳；firefox 对 <input type="radio"> 的 :default 有 bug，可能不匹配已设 checked 的项；Safari 完全不支持 :default（截至 Safari 17）

:default 和 :checked / :selected 的关键区别

:default 描述的是「初始状态是否由 HTML 属性决定」，而 :checked 或 :selected 描述的是「当前是否被选中」——这是两个完全不同的判断维度，不能互相替代。

• <input type="radio" name="x" value="a" checked> → 初始时同时匹配 :default 和 :checked
• 用户点选另一个 radio 后，原项失去 :checked，也失去 :default（因不再是初始默认项）
• 用 JS 设置 radio.checked = true，它获得 :checked，但永远得不到 :default
• <option value="2">Two</option> 没有 selected，即使它是下拉框里第一个，也不会匹配 :default

想实现「默认选项高亮」，更靠谱的替代方案

别依赖 :default 做视觉反馈，直接用 class 控制更可控。核心思路：把「默认」这个语义从 css 移到 HTML 结构里。

• 给默认项显式加 class，比如 <option value="1" class="is-default">One</option>，然后写 .is-default { background: #e6f7ff; }
• 如果默认项由后端决定，渲染时动态插入 class，避免 JS 运行后再 patch
• 需要 JS 动态重置时，用 select.selectedIndex = 0 + 手动 toggle class，而不是指望伪类自动恢复
• 注意：不要用 [selected] 作为替代选择器，因为属性选择器无法响应 JS 修改后的状态变化

调试时怎么确认 :default 到底有没有生效

打开 DevTools 的 Elements 面板，选中目标元素，在 Styles 标签页里看是否出现 :default 对应的规则——如果没显示，大概率是浏览器不支持或当前不满足触发条件。

立即学习“前端免费学习笔记（深入）”；

• 检查元素是否真的带 selected 或 checked 属性（不是 JS 设置的 Property）
• 在 Chrome 中可临时禁用 JS，刷新页面看伪类是否出现；若仍不出现，可能是标签类型不支持
• 用 getComputedStyle(el).backgroundColor 在 console 里验证样式是否被应用，排除 CSS 优先级干扰
• 别在 Safari 里测 :default，它根本不会解析这个伪类，连报错都不会有

实际项目里，:default 更像一个边缘特性，适合做渐进增强，但绝不能作为默认样式的唯一依据。真正要稳定控制“哪个是默认”，还是得靠 class + 明确的初始化逻辑。