:checked伪类失效通常因HTML结构或交互逻辑问题，需确保checkbox/radio类型正确、有name属性、未禁用、label正确绑定，且CSS选择器作用于input自身并合理使用兄弟/后代选择器。
如果 :checked 伪类没有生效，通常不是 CSS 本身的问题，而是 HTML 结构或交互逻辑没到位。关键要确认复选框（checkbox）或单选按钮（radio）处于“被用户勾选”状态，且标签与输入控件正确关联。
确保 input 元素类型和属性正确
:checked 只对 <input type="checkbox"> 和 <input type="radio"> 生效，对 text、button 等无效。同时必须有 name 属性（尤其 radio 组），否则浏览器可能不识别其“选中态”。
- ✅ 正确写法：
<input type="checkbox" id="agree"> - ❌ 错误写法：
<input type="checkbox" disabled>（禁用状态下无法触发 checked） - ❌ 错误写法：
<input type="checkbox" checked>（checked是布尔属性，写即为 true，删掉才表示未选中）
检查 label 与 input 的绑定关系
点击 <label></label> 能触发 :checked 的前提是：label 正确关联到 input。推荐两种方式：
- 用
for属性指向 input 的id：<label for="agree">我同意</label> <input type="checkbox" id="agree"> - 把 input 包在 label 内：
<label><input type="checkbox"> 我同意</label>
如果只是随便放个 label，没绑定，点击它不会改变 input 的 checked 状态，CSS 自然不响应。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“前端免费学习笔记（深入）”；
验证是否真被勾选（开发者工具辅助）
打开浏览器开发者工具（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 配合。
