:checked伪类可精准捕获checkbox选中状态，结合+或~选择器控制相邻元素样式；需隐藏原生checkbox并用label伪元素自定义外观，支持联动显隐、变色及transition动画，兼容IE9+。
用 :checked 伪类可以精准捕获 checkbox 被选中时的状态，再配合相邻兄弟选择器（+）或子元素关系，就能控制它旁边的标签、图标甚至其他元素的样式。
基础写法：隐藏原生 checkbox，自定义外观
浏览器默认的 checkbox 样式很难统一，通常先把它视觉隐藏，再用 label 或伪元素模拟新样式：
- 把
input[type="checkbox"]设为opacity: 0或position: absolute; left: -999px，确保可访问性但不干扰布局 - 给关联的
label添加自定义样式（比如方框、对勾图标） - 用
input:checked + label选中后改变 label 的背景、边框或伪元素内容
显示对勾图标：用 ::before / ::after 实现
在 label 上用伪元素画勾，比替换图片更轻量、易缩放：
input[type="checkbox"] { display: none; }
label::before {
content: "";
display: inline-block;
width: 18px; height: 18px;
border: 2px solid #999;
margin-right: 8px;
vertical-align: middle;
}
input:checked + label::before {
background: #007bff;
border-color: #007bff;
}
input:checked + label::after {
content: "✓";
color: white;
font-size: 14px;
position: relative;
left: -12px;
top: 1px;
}
联动其他元素：控制附近内容显隐或变色
:checked 不仅能改自己或 label，还能影响后续同级元素（用 ~ 或 +）：
立即学习“前端免费学习笔记（深入）”；
-
input:checked ~ .extra-info：让某个说明区块在勾选后才显示 -
input:checked + .toggle-text：点击 checkbox 后，紧挨着的文字变成“已启用” - 配合 transition 可添加平滑颜色/尺寸过渡（注意：
content不能过渡，但opacity、transform可以）
注意事项与兼容性
:checked 在所有现代浏览器中都支持（包括 IE9+），但要注意几点：
- 必须是
或，普通input不适用 - HTML 中
input和目标元素需在同一层级，且input必须在前（否则+/~无法匹配） - 如果用 JS 动态设置
checked属性，CSS 会立即响应，无需额外触发
基本上就这些。关键是结构写对、选择器链理清，不需要 JS 就能做出响应式交互效果。
