:checked选择器仅对checkbox和radio生效，匹配实时选中状态；不生效主因是DOM结构错误或事件时机不当，需通过兄弟/父级元素样式、隐藏原生控件并结合label实现自定义效果。
:checked 选择器只对 <input type="checkbox"> 和 <input type="radio"> 生效，它匹配当前被用户选中（或通过 JS 设置为 checked=true）的元素 —— 不是“默认选中”，而是“实时选中状态”。
为什么 :checked 有时不生效？
常见原因不是语法写错，而是 DOM 结构或事件时机问题：
- 样式写在
<input>自身上没用，因为<input>是替换元素，浏览器不渲染它的内容；必须作用于它的兄弟、父级或后续元素 - 写了
input:checked { background: red; }却看不到效果，是因为<input>没有背景可显示 - 用
label > input:checked + span时，<span>必须紧接在<input>后面，中间不能有换行或空格文本节点（HTML 解析后可能生成文本节点） - 单选按钮组里多个
checked属性同时存在，浏览器会自动修正，但:checked仍只匹配逻辑上真正选中的那一个
:checked 配合 label 实现自定义样式
最稳妥的做法是把 <input> 放进 <label>，隐藏原生控件，用 label 的伪类或相邻元素模拟 UI：
<label class="custom-radio"> <input type="radio" name="theme" value="dark"> <span>深色模式</span> </label>
然后这样写 CSS：
立即学习“前端免费学习笔记（深入）”；
.custom-radio input { display: none; }
.custom-radio input:checked + span { color: #007bff; font-weight: bold; }
/* 或者用 :before 绘制自定义圆点 */
.custom-radio input:checked + span:before {
content: "●";
margin-right: 6px;
}Radio 组里怎么确保至少一个被选中？
HTML 层面无法强制“必选”，:checked 本身也不提供兜底逻辑。但你可以：
- 服务端或 JS 提交前校验：用
document.querySelector('input[name="theme"]:checked')判断是否为null - CSS 层面提示：给整个 radio 组加
required属性后，配合:invalid+:checked做视觉反馈（注意兼容性） - 初始化时用 JS 补一个
checked：document.querySelector('input[name="theme"]').checked = true，但得确保 DOM 已就绪
真正容易被忽略的是：当用 JS 动态设置 element.checked = true 后，:checked 会立即响应，但如果你依赖 change 事件监听状态变化，记得手动触发 input.dispatchEvent(new Event('change')) —— 否则表单库或框架可能收不到更新。
