根本原因是HTML结构未对齐：checkbox必须位于nav前且用+或~选择器控制；需确保input可交互、label for匹配、避免display:none、兼顾可访问性及Safari渲染延迟。
用 :checked 配合隐藏导航时，为什么点击没反应？
根本原因通常是 HTML 结构没对齐：<input type="checkbox"> 必须在 <nav></nav> 或其容器之前，且用相邻兄弟选择器（+）或通用兄弟选择器（~）控制显示。否则 CSS 无法“感知”状态变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<input id="nav-toggle" type="checkbox">放在<nav></nav>外层容器最顶部，且不可被display: none或visibility: hidden隐藏（可用position: absolute; opacity: 0; pointer-events: none;隐藏但保留可交互性） - 触发按钮必须用
<label for="nav-toggle"></label>，且for值与input的id完全一致（大小写敏感） - 不要试图用 JS 模拟
:checked状态——CSS 伪类只响应真实表单控件的原生状态
小屏下导航收起后，如何让焦点和键盘操作不“掉链子”？
纯 CSS 开关容易忽略可访问性：display: none 会让屏幕阅读器跳过整个导航，visibility: hidden 虽保留语义但依旧不可聚焦。用户按 Tab 键可能直接跳过菜单，或卡在隐藏区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path: inset(100%)或position: absolute; left: -9999px;隐藏内容，而非display: none - 配合
aria-expanded属性动态更新：<button aria-expanded="false"></button>→ JS 监听change事件后设为"true"，确保辅助技术能感知开闭状态 - 打开时用
focus()主动聚焦到第一个<a></a>或<button></button>，关闭时恢复聚焦到触发按钮
为什么 Safari 上 :checked ~ nav 有时失效？
Safari（尤其旧版 iOS）对兄弟选择器在动态插入节点或 DOM 变动后存在渲染延迟，加上某些 CSS 层叠顺序问题，会导致状态切换后样式未及时应用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免嵌套过深：确保
<input>和<nav></nav>是同一父容器下的直系兄弟，不要隔多层<div> <li>加一层无副作用的重绘触发：在 JS 中 toggle 后短暂设置 <code>nav.style.transform = 'translateZ(0)'再还原（仅 Safari 需要） - 不用
transition动画控制display—— 它不支持过渡；改用max-height、opacity或transform - 遮罩层（
<div class="overlay">）必须显式设 <code>pointer-events: auto，关闭时用pointer-events: none（别依赖默认值） - 关闭逻辑里加
event.preventDefault()和event.stopPropagation()，尤其监听在<label></label>或遮罩层上 - 避免用
click绑定开关，改用change事件监听<input>，更可靠
移动端触摸穿透（click-through）怎么破？
当导航展开后快速点击遮罩层外区域关闭，再立刻点原位置按钮，可能触发底层按钮 —— 这是 iOS Safari 的 300ms 延迟残留 + pointer-events 切换时机问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是怎么写出开关动画，而是让每次点击都精准落在预期目标上，同时不打断键盘流、不欺骗屏幕阅读器、不被 Safari 的渲染节奏甩开半拍。
