:checked伪类直接匹配已勾选的复选框，推荐写法为input[type="checkbox"]:checked；需确保html自闭合、目标元素为同级后续兄弟，且隐藏复选框时应避免opacity:0影响状态触发。
如何用 :checked 伪类选中已勾选的复选框
直接用 :checked 就能精准匹配当前被用户勾选的 <input type="checkbox"> 元素。它只作用于真实处于选中状态的 DOM 节点，不依赖 class 或 JS 状态，也不受 disabled 影响（disabled 但 checked 的元素仍会匹配）。
常见误操作是写成 input:checked 却忘了加 type="checkbox" 限定——因为 :checked 同时匹配 checkbox 和 radio，没加类型约束可能意外命中单选按钮。
- 推荐写法：
input[type="checkbox"]:checked - 如果页面只有复选框，
input:checked也能用，但可读性和健壮性差 - 不能写成
.my-checkbox:checked然后只给元素加 class——class 不改变原生选中状态，:checked只认checked属性或实际勾选行为
为什么 :checked 不触发、样式没生效
最常踩的坑是 HTML 结构或属性缺失：
-
<input>标签必须是自闭合的，写成<input>会导致浏览器忽略其状态，:checked失效 - 没有
name属性一般不影响:checked匹配，但某些旧版 iOS Safari 在表单提交场景下可能异常，建议保留 - 动态插入的复选框（如 JS append），只要插入后用户点击过，
:checked就能响应；但若用 JS 直接设elem.checked = true，CSS 会立即更新——这点和:hover不同，它是同步响应 DOM 属性变化的
用 :checked 配合兄弟选择器控制其他元素显隐
这是最实用的场景：不需要 JS 就能实现“勾选即显示说明文字”或“切换内容区块”。关键靠 ~（通用兄弟）或 +（相邻兄弟）。
HTML 必须保证目标元素是 input 的**后续兄弟节点**，且在同一父容器内：
<div> <input type="checkbox" id="show-info"><label for="show-info">显示详情</label> <p class="detail">这里是额外信息</p> </div>
对应 CSS：
.detail { display: none; }
#show-info:checked ~ .detail { display: block; }
- 用
~更灵活，不要求紧邻；用+则必须紧跟在input后面 - 不能跨父级，比如把
.detail放到外层<div> 外，<code>:checked就选不到 - 如果目标是 label 本身，可以直接写
input:checked + label，无需额外 class
移动端 click 延迟与 :checked 响应时机
在 iOS Safari 中，纯 CSS 的 :checked 切换是即时的，不存在 300ms 延迟——因为这不是 click 事件，而是表单控件状态变更，浏览器底层直接触发渲染更新。
但要注意一个隐藏问题：如果复选框被 opacity: 0 或 visibility: hidden 遮盖，而用 label 模拟点击区域，必须确保 label 的 for 属性正确绑定 ID，否则点击不会触发 checkbox 状态变更，:checked 自然不生效。
更稳妥的隐藏方式是用 position: absolute; left: -9999px，既保持可访问性，又避免渲染干扰。
复杂点在于表单重置（<button type="reset"></button>）后，:checked 样式会自动回退，但如果你用 JS 手动清空了 checked 却忘了触发 input 事件，某些依赖事件监听的逻辑可能不同步——而 :checked 本身不受影响，它永远只看真实 DOM 状态。
