:default伪类几乎没反应是因为浏览器支持有限，仅对原生初始默认项生效，且Safari完全不支持；应改用class显式标记默认项来确保样式稳定。
为什么 :default 伪类在表单里几乎没反应
因为浏览器对 :default 的支持非常有限，且只作用于「用户未手动切换过」的原生默认选项——不是你写个 selected 或 checked 就算数，而是得靠浏览器在渲染时自动认定哪个是初始默认项。
- 只有
<button>、<input type="radio">、<input type="checkbox">和<option>支持该伪类，<select>或<textarea>不行 -
<option selected>确实能触发: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 + 明确的初始化逻辑。 
