怎么用 :checked 选中复选框的样式
直接靠 :checked 伪类就能捕获复选框当前是否被勾选，但它**只作用于 <input type="checkbox"> 元素本身**，不能直接给旁边的标签或父容器加样式。常见错误是写 label:checked { ... } —— 这根本不会生效，因为 label 没有 checked 属性。
实操要点：
-
:checked必须写在input[type="checkbox"]后面，比如input[type="checkbox"]:checked - 想控制紧邻的
label，用+（相邻兄弟选择器）：input[type="checkbox"]:checked + label - 想控制后续任意位置的兄弟元素，用
~（一般兄弟选择器） - 别试图用
:checked去选中父级——CSS 没有父选择器，这个限制绕不开
为什么 label 点击没反应或样式不更新
核心原因通常是 HTML 结构没对齐，或者事件绑定方式冲突。浏览器原生点击 label 触发复选框切换，依赖的是 for 属性和 id 匹配，或把 input 套进 label 里。
检查这几处：
立即学习“前端免费学习笔记（深入）”；
- 如果用
for，确保label的for值和input的id完全一致（大小写、空格、连字符都算） - 更推荐嵌套写法：
<label><input type="checkbox"> 我同意</label>，这样不用管id - JavaScript 手动调用
click()或设置checked = true会触发 DOM 变化，:checked样式能响应 - 但用
setAttribute('checked', '')不会触发状态更新，得用.checked = true
:checked 在不同浏览器里的兼容性表现
现代浏览器（Chrome 20+、Firefox 19+、Safari 7+、Edge 12+）都支持 :checked，但有两个实际差异点容易踩坑：
- Safari 旧版本（option 元素用
:checked，不过复选框不受影响 - IE8 及以下完全不支持
:checked，如果还要兼容，得靠 JS 切换 class 模拟 - 移动端 iOS Safari 对
label点击区域敏感，建议给label加cursor: pointer和最小高度，避免点不中
自定义复选框外观时的常见断点
真正做视觉替换时，:checked 只是起点，关键在怎么“藏掉原生框 + 换上新样式”。最容易出问题的是隐藏方式和可访问性丢失。
- 别用
display: none隐藏input—— 屏幕阅读器就读不到它了；改用position: absolute; opacity: 0; width: 1px; height: 1px; - 自定义图标（比如 ✓）建议用伪元素
::after，配合input:checked + label::after控制显隐 - 记得补上
:focus样式，否则键盘用户 Tab 到复选框时看不到焦点框，不符合无障碍要求 - 动画过渡要谨慎：对
opacity或transform做transition比较稳；别对display或visibility做过渡，它们不触发重绘
