:checked伪类失效的根本原因是html结构不合法：仅对合法的type="checkbox"/"radio"且未disabled的表单控件生效；必须通过label[for]显式绑定才能可靠触发状态与样式联动。
为什么 :checked 伪类在某些情况下完全不生效
根本原因通常是 HTML 结构不合法：浏览器只对符合规范的 <input type="checkbox"> 或 <input type="radio"> 元素应用 :checked，且该元素必须是“可交互的表单控件”——比如被禁用（disabled）、被移出 DOM、或被包裹在非标准容器中（如 <div contenteditable>），都会导致伪类失效。另外，<code>:checked **无法作用于 <select></select> 或 <textarea></textarea>**，这是常见误用点。
- 检查是否漏写了
type="checkbox"（仅写<input>默认是text） - 确认没有同时设置
disabled属性（disabled元素永远不匹配:checked） - 避免把
<input>放在<label></label>外部又没用for关联——此时点击 label 不触发状态变更，样式自然不变
label 标签 + :checked 是唯一稳定可控的联动方式
纯 CSS 实现“点击文字控制勾选+样式变化”，必须依赖 <label></label> 与 <input> 的显式绑定。只有这样，用户点击 label 才真正触发 input 的 checked 状态切换，进而激活 :checked 伪类。
<input type="checkbox" id="agree">
<label for="agree">我已阅读并同意</label>
<style>
input[type="checkbox"]#agree + label {
color: #666;
}
input[type="checkbox"]#agree:checked + label {
color: #007bff;
font-weight: bold;
}
</style>
-
for属性值必须与input的id完全一致（区分大小写） - 使用相邻兄弟选择器（
+）比通用兄弟（~）更安全，避免误匹配其他 label - 不要用
label > input包裹结构再用label:hover input:checked——这种嵌套下:checked仍有效，但 hover 逻辑会干扰真实交互意图
隐藏原生 checkbox 后，用伪元素模拟 UI 是最常用方案
直接给 <input> 加样式无效（浏览器忽略大部分 CSS），所以标准做法是视觉隐藏它，再用 label::before 或 label::after 绘制自定义勾选框，并通过 :checked 控制其状态。
<input type="checkbox" id="switch">
<label for="switch">开启通知</label>
<style>
input[type="checkbox"]#switch {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="checkbox"]#switch + label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: -4px;
border: 2px solid #999;
border-radius: 4px;
}
input[type="checkbox"]#switch:checked + label::before {
background: #007bff;
border-color: #007bff;
}
input[type="checkbox"]#switch:checked + label::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23fff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
</style>
-
opacity: 0+pointer-events: none比display: none或visibility: hidden更可靠——前者保留表单语义和可访问性，后者会让:checked失效或破坏屏幕阅读器识别 - SVG 路径需 URL 编码，否则可能被 CSS 解析器截断；也可改用 base64 或外部图标字体
- 务必测试键盘操作（Tab 切换 + Space 触发）是否仍能改变状态——这是无障碍关键
动态插入的 checkbox 需注意事件委托不适用 :checked
CSS 伪类是静态匹配机制，不依赖 JS 事件。但如果 checkbox 是 JS 动态插入（例如 Vue/React 渲染、innerHTML 注入），要确保插入后 DOM 中存在合法的 <input type="checkbox"> 节点，并且未被框架意外移除或重写。React 中常见错误是把 checked 写成受控属性却没同步 state，导致视觉与 DOM 状态不一致。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具 Elements 面板直接查看元素是否带有
checked属性（注意：DOM 属性checked存在 ≠ 伪类生效，还需满足上述结构要求） - 避免在 JS 中用
element.setAttribute('checked', 'true')——应使用element.checked = true，否则可能不触发渲染更新 - 框架内优先使用原生
<input type="checkbox">+v-model/onChange，而非自己模拟 checkbox 行为
:checked 本身足够简单，但实际卡住的地方几乎全在 HTML 结构合法性、label 绑定准确性、以及隐藏原生控件时的可访问性取舍上。漏掉任一环，样式就静默失效，且无任何报错提示。
