:checked + display 切换不触发重绘的根本原因是目标元素初始为display:none时未参与布局，浏览器跳过其样式重计算；应改用opacity/visibility等保留文档流的隐藏方式并配合will-change或transform触发重排。
为什么 :checked + display 切换不触发重绘
常见现象是：勾选复选框或单选按钮后，用 :checked ~ .target { display: none; } 控制兄弟元素隐藏，但首次勾选没反应，或切换延迟。根本原因不是选择器写错，而是 display 的初始值在渲染树中已确定，而 :checked 状态变化时若目标元素此前未参与布局（比如初始为 display: none），浏览器可能跳过对它的样式重计算——尤其当它没有尺寸、不影响流式布局时。
实操建议：
- 确保目标元素在文档流中有明确的“存在感”：初始不要设
display: none，改用opacity: 0; height: 0; overflow: hidden;等组合隐藏，再配合:checked恢复 - 强制触发样式重排：给目标元素加一个无副作用的
transform: translateZ(0)或will-change: opacity，有助于激活图层并让状态变更被及时捕获 - 避免嵌套过深：
:checked ~ .a ~ .b ~ .c这类长兄弟选择器容易因中间节点缺失而中断匹配，优先用相邻兄弟+或包裹容器控制
:checked 配合 visibility 的行为差异
visibility: hidden 不会脱离文档流，因此元素始终参与布局计算，:checked 触发时样式更新更可靠；但它的“隐藏”只是视觉不可见，仍占空间、可被聚焦、影响 tab 键顺序。
使用场景判断：
立即学习“前端免费学习笔记（深入）”；
- 需要保留占位、避免页面抖动（如表单展开区）→ 选
visibility - 需彻底移出交互路径（如模态框底层遮罩）→ 改用
display，但必须配合初始可见 + 动画过渡，例如：.toggle-target { opacity: 0; visibility: hidden; transition: opacity 0.2s; } input:checked ~ .toggle-target { opacity: 1; visibility: visible; } - 注意
visibility: collapse在表格中才有特殊行为，普通块级元素等同于hidden
input 元素位置与选择器作用域的关键约束
:checked 只能控制位于其**后续文档流中**的元素，且仅支持 +（紧邻兄弟）和 ~（一般兄弟），无法向上或跨父容器选择。
典型错误：
- 把
input放在.target后面 → 选择器完全不生效 - 用
input:checked .target（后代选择器）→input本身不包含.target，永远不匹配 - 期望通过
label[for="id"]触发 →label点击虽可触发input:checked，但选择器仍要基于input元素位置，不是label
可靠写法示例：
<input type="checkbox" id="toggle">
<label for="toggle">点击切换</label>
<div class="panel">内容区</div>
<style>
#toggle:not(:checked) ~ .panel { display: none; }
</style>
移动端 Safari 和旧版 Chrome 的兼容性坑
iOS 15.4 之前、Chrome 89 以下版本中，:checked 在动态插入的 input 上可能不触发样式更新，尤其是通过 JS 添加节点后立即设置 checked=true。
绕过方式：
- 插入后加微任务延迟：
input.checked = true; Promise.resolve().then(() => input.dispatchEvent(new Event('change'))); - 避免纯 CSS 方案：关键交互改用 JS 监听
change事件并手动增删 class，更可控 - 测试真机：模拟器常忽略这类渲染异常，务必在 iOS 实机上验证折叠菜单、抽屉栏等依赖
:checked的组件
最易被忽略的是：所有这些失效都只发生在「首次渲染后状态变更」这个瞬间，静态快照（比如截图或 SSR 输出）里看起来完全正常。
