:target能开弹窗但关不干净，因仅响应url fragment真实变更；有效关闭仅靠清hash或使匹配失效，js修改hash不触发重新计算。
能实现，但必须用 :target 只响应 URL fragment（即 结构错一个，弹窗就完全没反应： 直接写 更稳妥的写法： URL 带 最易被忽略的一点：弹窗内容若含 #id 触发、靠浏览器原生锚点行为驱动，且弹窗需是页面内已渲染的 <div> 或 <code><section></section> 元素；任何依赖 JS 修改 location.hash 或拦截跳转的操作都会让它失效。
为什么 :target 能开弹窗，但不能“关”得干净
# 后的部分）的真实变更——点击 <a href="#modal1"></a> 会激活 div#modal1:target，但点击「关闭」按钮时，如果只是用 JS 清空 hash 或调用 history.replaceState，:target 不会重新计算，弹窗就卡住不关。
<a href="#"></a>（跳到页面顶部，清掉 hash）或 <a href="#nonexistent"></a>（匹配不到任何元素，所有 :target 失效）javascript:void(0)、# 以外的伪协议，否则不触发导航，:target 完全不响应<form></form> 行为未被阻止HTML 结构必须满足的三个硬性条件
<a></a> 的 href 必须是 #modal-id 格式，且目标 <div id="modal-id"> 必须在 DOM 中已存在（不能由 JS 动态插入）
<li>弹窗容器不能是 <code><dialog></dialog>，它不支持 :target；必须用 <div>、<code><section></section> 等常规块级元素，并设 id
<a href="#"></a> 或 <a href="#close"></a>，且页面中不能有 id="close" 的元素（否则它会被激活，干扰逻辑）关键 CSS 写法与常见失效原因
div:target { display: block; } 很容易失败，因为：
overflow: hidden 或 position: relative，导致 :target 元素被裁剪或定位异常display: none → display: block 切换，会引发布局重排，遮罩层、滚动条等表现不可控z-index 和 position，弹窗被其他内容压住，或无法覆盖全屏div.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
visibility: hidden;
opacity: 0;
z-index: -1;
transition: opacity 0.25s ease;
}
div.modal:target {
visibility: visible;
opacity: 1;
z-index: 1000;
}
如何避免首次加载时弹窗闪现或默认打开
#modal1 时弹窗自动打开，但用户首次访问 index.html 时没有 hash，:target 不匹配任何元素，弹窗自然隐藏——这本身是安全的。问题出在开发调试阶段：
file:///.../index.html#modal1，导致一打开就弹窗；解决方法是确保初始 URL 不带 hash，或把测试入口链接放在页面下方而非顶部python -m http.server）访问，可避免 file:// 协议下 hash 行为不一致的问题section:not(:target) 配合 section:first-of-type 让某个弹窗“默认开”，那属于混合策略，已脱离纯 :target 逻辑<input> 或 <textarea></textarea>，焦点不会自动进入，也无法用 :focus-within 激活样式——这是纯 CSS 方案的天然限制，不是 bug。
