应使用 :checked 伪类为默认选中的单选框加样式，前提是 HTML 中明确声明 checked 属性（如 ），而非通过 JS 设置；[checked] 不可靠，因它不区分真假值且不响应运行时变化；需确保 label 与 radio 正确关联（推荐 for/id 方式）以保障选择器生效。
怎么给默认选中的单选框加样式？
浏览器只对用户主动点击触发的 :checked 状态做响应，而 default 不是 CSS 伪类，也不存在 :default 用于单选框（它只对 <button></button> 或 <input type="submit"> 有效）。所以不能靠“默认”这个语义来写样式——得靠 HTML 里实际带 checked 属性的元素。
:checked 是唯一可靠的选择器
只要单选框在 HTML 中声明了 checked 属性（哪怕没用户操作），:checked 就能匹配上。这是目前最稳定、兼容性最好的方式。
- 必须写成
<input type="radio" name="x" value="a" checked>，不能靠 JS 后续设置.checked = true—— 那样不会触发:checked伪类 - 注意：如果多个同名单选框都写了
checked，浏览器只认第一个，其余会被忽略 - 样式示例：
input[type="radio"]:checked + label { color: #007bff; font-weight: bold; }
为什么不用 [checked] 属性选择器？
[checked] 看似直观，但它匹配的是“有这个属性”，不管值是否为 true；而有些框架或模板会错误地渲染 checked="false"，这时 [checked] 仍会命中，但 :checked 不会——后者只反映真实选中状态。
-
:checked是动态的：JS 改变.checked，样式立刻更新 -
[checked]是静态的：只看 HTML 属性是否存在，不随运行时状态变化 - 现代浏览器都支持
:checked，IE9+ 没问题，没必要降级
常见坑：label 和 radio 的绑定关系被破坏
样式生效的前提是 :checked 能影响到后续兄弟或父级元素。如果结构松散，比如 label 包不住 input，又没用 for/id 显式关联，那即使 radio 被选中，你也无法用 + 或 ~ 选中对应 label。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<input type="radio" id="opt1" name="mode" checked><label for="opt1">选项一</label>
- 这样就能写
input[type="radio"]:checked + label安全命中 - 避免把
input套进label再额外加for，容易引发重复绑定或 focus 行为异常
:checked。别想绕开 HTML 的 checked 属性去模拟“默认”，那只会让样式和状态脱节。 
