:checked 伪类配合 ~ 只能选中 DOM 中同级且位于其后的元素，需确保 checkbox 与目标元素同父、顺序正确、无无关节点阻断；错误结构或属性设置会导致样式失效。
用 :checked 配合 ~ 选中同级元素，前提是它们必须是真正同级且顺序靠后
不能跨父容器，也不能反过来让前面的元素响应后面的 checkbox —— 浏览器只支持向后查找通用兄弟元素。常见错误是把 input[type="checkbox"] 和目标面板放在不同 <div> 下，或者目标元素写在 checkbox 前面，结果样式完全不生效。
<p>实操建议：</p>
<ul><li>确保 <code>input 和要控制的面板（比如 <section></section> 或 <div>）在 DOM 中处于同一父级、且面板元素在 checkbox 元素之后
<li>checkbox 必须有 <code>id，目标元素用 for 关联或直接相邻放置（不需要 for 也能工作，但可访问性差）
<div> 里，而该 <code><div> 不是 checkbox 的直接兄弟，<code>~ 就失效了
示例结构（有效）：
<input type="checkbox" id="panel-toggle"> <div class="panel">…</div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
#panel-toggle:checked ~ .panel { display: block; }
:checked + ~ 控制多个同级元素时，每个都要单独写规则
通用兄弟选择器 ~ 不会“穿透”或批量作用；它每次只匹配紧随其后的符合条件的兄弟元素。想同时显示标题、内容、按钮三个区块？得分别写三条规则，而不是指望一条搞定全部。
常见错误现象：#toggle:checked ~ .panel-title, .panel-content, .panel-action 这种写法实际是「#toggle 之后的 .panel-title」或「任意位置的 .panel-content」或「任意位置的 .panel-action」——逗号分隔的是三个独立选择器，不是链式作用。
正确做法：
- 给所有要控制的元素加统一类名（如
.panel-part），然后用#toggle:checked ~ .panel-part - 或者逐个写：
#toggle:checked ~ .panel-title、#toggle:checked ~ .panel-content、#toggle:checked ~ .panel-action - 注意：如果中间插了一个没加类、也没被选中的元素（比如
<p>说明文字</p>），它会阻断~对后续元素的匹配 ——~只找“后面所有”，但必须是“可匹配的兄弟”，不是跳过无关节点的全局搜索
移动端点击无响应？检查 checkbox 是否被 pointer-events: none 或隐藏过度
很多人为了“美化 checkbox”，用 opacity: 0 或 visibility: hidden 把原生控件藏掉，再用伪元素模拟开关。但若忘了保留可点击区域（比如没给 label 设置 display: block 或没配 for），或者误加了 pointer-events: none，就会导致 iOS/Android 上点不动、:checked 永远不触发。
使用场景：交互式 FAQ 折叠、移动端导航菜单、表单条件显隐
实操建议：
- 优先用
<label for="xxx"></label>包裹可见控件（图标、文字），而不是仅依赖点击 input 本身 - 隐藏原生 checkbox 时，用
position: absolute; opacity: 0; width: 1px; height: 1px;更稳妥，比display: none或visibility: hidden更兼容 - 避免对 checkbox 本身设置
pointer-events: none—— 它得能接收点击才能切换状态 - 真机测试时，打开 Safari 开发者工具远程调试，看点击时
input的checked属性是否变化
IE 不支持 :checked 作用于非 <input type="checkbox/radio"> 元素
虽然现代浏览器支持 :checked 用于 <option></option> 或自定义 Web Component，但 IE（包括 Edge Legacy）只认原生表单控件。如果你用 <div role="checkbox" aria-checked="true"> 并试图用 <code>div[aria-checked="true"] ~ .panel，它在 IE 下完全无效。
性能与兼容性影响：
-
:checked是 CSS 原生伪类，无 JS 开销，渲染快，但无法监听状态变更事件（如需做日志或联动 JS，还得补监听change） - IE11 及以下不支持
:checked与通用兄弟选择器组合用于非表单元素，也不支持:has()回溯，所以别想着绕开 checkbox 标签 - 如果项目仍需支持 IE，就老实用 JS 切 class，CSS 只负责样式，别强求纯 CSS 方案
容易被忽略的一点：当 checkbox 被 JS 动态设置 checked = true 时，:checked 伪类会立即响应；但如果是通过 setAttribute('checked', '')，在部分旧版浏览器中可能不触发重绘 —— 直接操作 .checked 属性更可靠。
