纯css弹窗需用:target实现，前提为弹窗容器有唯一id且链接href精确匹配#id；须用opacity/visibility过渡替代display，配合fixed定位与z-index；关闭应避免href="#"残留，推荐href="#close"并设空id元素。
弹窗结构必须带唯一 id，且触发链接的 href 必须精确匹配
浏览器只在 URL 哈希（#xxx）与页面中某个元素的 id 完全一致时，才让该元素匹配 :target。常见错误是写成 href="#modal" 但弹窗容器却是 <div class="modal"></div> —— 没有 id，:target 根本不生效。
- 弹窗容器必须写
id="modal-login"这类明确 ID，不能只靠 class - 触发链接必须是
@#@#@#@#@#@#@#@#@#@0，不能漏掉#或拼错大小写 - 多个弹窗共存时，每个
id必须全局唯一，否则:target行为不可预测
显示/隐藏不能只用 display，得靠 opacity + visibility + transition
直接写 .modal { display: none; } 和 .modal:target { display: block; } 虽能切换显隐，但会导致动画失效——display 不支持过渡。更糟的是，display: none 会彻底脱离文档流，可能引发布局跳动或遮罩层错位。
- 推荐写法：
.modal { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } -
.modal:target { opacity: 1; visibility: visible; }—— 这样动画才真正可感知 - 必须加
position: fixed和足够高的z-index，否则弹窗会挤占正常内容流
关闭弹窗只能靠跳转新哈希，href="#" 有残留风险
点击关闭按钮时，如果只写 href="#"，URL 会变成 https://site.com/#，但当前弹窗的 id 仍留在地址栏历史里。用户再点同一打开链接，哈希没变，:target 不会二次触发，弹窗就“卡住”了。
- 稳妥做法是关闭链接设为
href="#close"，并在页面底部加一个空元素<div id="close"></div> - 或者用两个不同哈希来回切，比如打开用
#login，关闭用#none，并确保id="none"存在 - 别指望点击遮罩层自动关闭——纯 CSS 下没有“点击非弹窗区域”的选择器，
:not(:target)不起作用
iOS Safari 和早期 Android WebView 有重绘延迟，得加兜底
移动端尤其 iOS Safari，当页面已滚动一段距离后，哈希变化有时不会立刻触发 :target 样式更新，导致弹窗“点了没反应”或“延迟半秒才出现”。这不是你代码写错了，是渲染管线的已知行为。
- 给弹窗容器加
will-change: opacity;可提升重绘优先级 - 配合
scroll-behavior: smooth到，缓解哈希跳转时的突兀滚动 - 避免在
:target规则里用transform: scale()配合display切换，这在旧 WebView 中极易失灵
#modal-login 的链接发出去，对方点开就直接弹窗——这未必是你要的效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
