:checked伪类是CSS中唯一可被用户主动触发且能维持的布尔状态，仅适用于checkbox/radio输入框，配合兄弟选择器实现无JS切换样式；需确保input位于目标前、正确绑定label、用非display:none方式隐藏，并注意~与+的选择范围差异。
用 :checked 配合兄弟选择器（~ 或 +）是纯 CSS 实现点击切换样式的可靠方案，前提是把交互“借给”一个隐藏的 <input type="checkbox"> 或 <input type="radio"> 元素。
为什么必须用 <input> 而不能直接监听任意元素？
CSS 没有“点击状态”的伪类（比如不存在 :clicked），:checked 是唯一能被用户主动触发、且可被 CSS 捕获的布尔状态。它只作用于 <input type="checkbox"> 和 <input type="radio">，且必须由用户真实交互（点击、空格键等）触发，JS 修改 .checked 属性不会触发重绘 —— 这反而是优点：样式切换完全受控、无 JS 依赖、天然可访问。
- label 必须正确绑定 input（用
for或包裹），否则点击 label 不会触发:checked - input 必须在 DOM 中位于目标元素之前（或同一父级下靠前），否则兄弟选择器无法向上匹配
- 不要 display: none 隐藏 input；用
position: absolute; opacity: 0; width: 1px; height: 1px;等方式隐藏，否则部分屏幕阅读器可能忽略
~ 和 + 的选择逻辑差异
+ 只匹配紧邻的下一个兄弟元素，~ 匹配之后所有符合条件的兄弟元素。选哪个取决于你要控制的范围：
- 想只改下一个
<div>？用 <code>input:checked + div - 想改后面多个同级元素（比如切换菜单 + 图标 + 文案）？用
input:checked ~ .target - 如果目标不在 input 同级，而在子级（如
input:checked ~ .menu > ul），没问题；但不能跨父级（CSS 无父选择器）
示例：
<input id="toggle" type="checkbox"><br><label for="toggle">点我</label><br><div class="panel">内容区</div><br><span class="hint">提示文字</span>
对应样式：
input#toggle:checked ~ .panel { opacity: 1; max-height: 200px; }<br>input#toggle:checked ~ .hint { color: #007bff; }
radio 组实现单选式切换（如标签页）
用 type="radio" + 相同 name 可自然互斥，配合 :checked 控制不同面板显示：
立即学习“前端免费学习笔记（深入）”；
- 每个 radio 对应一个
id，每个目标面板加对应class（如.tab-1） - 用
input#tab1:checked ~ .tab-1显示，再用input#tab1:checked ~ .tab-2, input#tab1:checked ~ .tab-3 { display: none; }隐藏其他（或统一设默认display: none，只对 :checked 的 target 设display: block） - 注意：radio 的
:checked状态在页面加载时可预设（加checked属性），而 checkbox 默认未选中
常见失效原因与调试建议
样式不生效？先检查这几点：
- input 是否被意外设置了
disabled？禁用后无法触发:checked - 兄弟选择器路径是否断裂？比如中间插入了
<div> 或注释节点 —— <code>~和+只认“元素节点”，文本/注释节点会打断链路 - 是否误用了
:focus或:active替代:checked？它们是瞬态伪类，无法维持状态 - 目标元素是否被更高级别的 CSS 规则覆盖？
:checked选择器优先级并不高，必要时加!important（仅调试用）或提升选择器特异性（如加父级 class）
真正难的不是写法，而是把 DOM 结构设计成“input → 可控兄弟”的线性关系。一旦结构嵌套过深或目标分散在不同容器里，就得换思路（比如加 JS 或改用 details/summary）。
