应使用 [selected]、[checked] 或 data-default 替代 :default 伪类——因现代浏览器已基本弃用 :default，对 <select>、提交按钮等完全无效，且不响应运行时状态变化。
别用 :default 高亮默认选中项——它在现代浏览器中基本不生效，尤其对 <select> 和提交按钮完全无效。
为什么 :default 在 DevTools 里看不到匹配样式
因为浏览器（Chrome、Firefox、Safari 17+）已基本弃用该伪类的运行时匹配逻辑。它只在极少数旧版场景下对 <input type="radio"> 或 <input type="checkbox"> 的初始 checked 属性有微弱响应，且不触发重绘。你在 Styles 面板里找不到 :default 规则被应用，不是写法错，是浏览器根本没走这个分支。
-
<select> option:default：所有主流桌面浏览器均无视，Safari 自 2022 年起彻底移除支持 -
button:default或input[type="submit"]:default：不看type，也不响应 DOM 顺序或form.defaultSubmit，现代 UA 不认定任何 button 为 “default” - 调用
form.reset()后：:default不会重新匹配——它只认 HTML 初始快照，不是运行时状态
[selected] 和 [checked] 是更靠谱的替代写法
它们是属性选择器，匹配元素是否带有对应 HTML 属性（而非 JS 设置的 property），稳定、可预测、全浏览器支持。
- 高亮预设的
<option>：用select option[selected] { background: #e3f2fd; }，只要 HTML 里写了selected就生效 - 标记默认单选/复选：写
input[type="radio"][checked]，但注意——这仅在服务端渲染时带checked属性才可靠；JS 动态设置el.checked = true不会添加该属性 - 别混淆
:selected（当前 UI 选中状态）和[selected]（静态属性存在性），后者才是你想要的“初始默认”语义
真正跨浏览器一致的方案：用 data-default 显式标记
把“默认”这个语义从模糊的伪类，移到明确的 HTML 属性上，CSS 和 JS 都能可靠驱动。
立即学习“前端免费学习笔记（深入）”；
- HTML 示例：
<input type="radio" name="theme" value="dark" checked data-default> - CSS 写法：
input[type="radio"][data-default] { outline: 2px solid #2196f3; } - 配合
form.reset()：监听reset事件，在回调里手动恢复[data-default]对应项的视觉状态（比如加.is-active类） - 后端模板渲染时插入
data-default，比等 JS 运行后再 patch 更快、更稳
最常被忽略的一点：开发者总想靠一个伪类自动识别“那个该被点的按钮”或“那个初始就该亮的选项”，但浏览器早已不提供这种能力。data-default 不是妥协，而是目前唯一稳定、可测试、不随浏览器版本波动的方案。
