:checked伪类失效通常因HTML结构或交互逻辑问题，需确保checkbox/radio类型正确、有name属性、未禁用、label正确绑定，且CSS选择器作用于input自身并合理使用兄弟/后代选择器。
如果 :checked 伪类没有生效，通常不是 CSS 本身的问题，而是 HTML 结构或交互逻辑没到位。关键要确认复选框（checkbox）或单选按钮（radio）处于“被用户勾选”状态，且标签与输入控件正确关联。
确保 input 元素类型和属性正确
:checked 只对 和 生效，对 text、button 等无效。同时必须有 name 属性（尤其 radio 组），否则浏览器可能不识别其“选中态”。
- ✅ 正确写法：
- ❌ 错误写法：
（禁用状态下无法触发 checked） - ❌ 错误写法：
（checked是布尔属性，写即为 true，删掉才表示未选中）
检查 label 与 input 的绑定关系
点击 能触发 :checked 的前提是：label 正确关联到 input。推荐两种方式：
- 用
for属性指向 input 的id： - 把 input 包在 label 内：
如果只是随便放个 label，没绑定，点击它不会改变 input 的 checked 状态，CSS 自然不响应。
立即学习“前端免费学习笔记（深入）”；
验证是否真被勾选（开发者工具辅助）
打开浏览器开发者工具（F12），选中 checkbox 元素，在 Elements 面板中观察其 DOM 状态：
- 勾选后应看到
checked=""或checked属性出现； - 若手动加了
checked属性但页面没变化，可能是 JS 覆盖了状态（如 Vue/React 中受控组件未同步）； - 若勾选后属性没变，说明事件没触发——检查是否有
event.preventDefault()或阻止默认行为的脚本。
CSS 选择器写法要匹配实际结构
:checked 是伪类，只能作用于 input 元素自身，想控制其他元素需借助相邻/兄弟/后代选择器。常见误区：
- ❌
label:checked { ... }—— label 没有 checked 状态； - ✅
input:checked + label { ... }—— 控制紧邻的 label； - ✅
input:checked ~ .tip { ... }—— 控制后续同级元素； - ✅
input:checked ~ div span { ... }—— 控制后代中的 span。
注意：CSS 无法反向选择父元素（比如通过 :checked 改变 input 的父容器样式），这类需求需 JS 配合。
