:checked本身不实现切换，仅响应选中状态；真正起作用的是配合+或~兄弟选择器控制后续同级元素的样式，如opacity、max-height、transform等，从而实现显隐、位移等动画效果。
:checked 本身不“实现切换”，它只是响应用户操作后暴露的状态；真正起作用的是你用它配合兄弟选择器（+ 或 ~）去控制后续元素的样式。没有 JS，就靠这个状态链驱动显隐、位移、旋转等变化。
为什么:checked能触发内容显示或隐藏
浏览器原生支持 input[type="checkbox"] 和 input[type="radio"] 的选中/取消选中行为，:checked 就是 CSS 对这个状态的监听入口。只要 HTML 结构满足“目标元素是该 input 的后续同级兄弟”，你就能用 :checked ~ .target 或 :checked + .target 去改它的 display、max-height、opacity 等属性。
- 必须把
input放在要控制的元素前面（不能嵌套、不能跨父容器） -
label要用for属性绑定到input的id，否则点击 label 不会触发状态变更 - 直接设
display: none → block无法加transition，得用max-height或transform配合过渡
:checked + 和 :checked ~ 的区别与误用场景
+ 只匹配紧挨着的下一个兄弟元素；~ 匹配后面所有符合条件的兄弟元素。很多人写 .tab:checked + .content 却发现内容不显示，就是因为实际结构里 .content 并不在 .tab 正后方——中间可能隔了 label 或其他 input。
- 适用
+的场景：单个折叠面板，结构是<input><div class="panel">...</div> - 适用
~的场景：多选项卡，所有.content都堆在底部，如<input id="tab1"><label for="tab1">...</label><input id="tab2"><label for="tab2">...</label><div id="content1">...</div><div id="content2">...</div> - 错误写法示例：
.tab:checked + .tab-label + .content——.content不是.tab-label的紧邻后继，永远不生效
如何让切换带平滑动画而不是突兀显隐
对 display 加 transition 是无效的，CSS 过渡只对可计算数值属性起作用。想做展开收起动画，必须用 max-height 或 transform + opacity 组合。
立即学习“Java免费学习笔记（深入）”；
- 推荐方案：设
max-height: 0→max-height: 300px（需预估最大高度），配合overflow: hidden - 避免写
max-height: 0 → max-height: auto，因为auto不是具体数值，过渡会失效 - 如果内容高度完全不可控，改用
transform: scaleY(0)→transform: scaleY(1)+opacity，更可靠 - 记得给容器设
will-change: transform或backface-visibility: hidden防止部分浏览器渲染抖动
最常被忽略的一点：所有依赖 :checked 的交互都要求用户能真实触发状态变更——这意味着 input 不能被 display: none 或 visibility: hidden 彻底移出可访问流，通常用 position: absolute; opacity: 0; pointer-events: none; 隐藏但保留功能。否则屏幕阅读器和键盘焦点都会失效，不是真“可用”。
