: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></span>必须紧接在<input>后面，中间不能有换行或空格文本节点（HTML 解析后可能生成文本节点） - 单选按钮组里多个
checked属性同时存在，浏览器会自动修正，但:checked仍只匹配逻辑上真正选中的那一个
:checked 配合 label 实现自定义样式
最稳妥的做法是把 <input> 放进 <label></label>，隐藏原生控件，用 label 的伪类或相邻元素模拟 UI：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<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')) —— 否则表单库或框架可能收不到更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
