:target纯CSS弹窗依赖URL哈希变化，需href="#id"与唯一id匹配，用visibility/opacity实现过渡动画，关闭须改哈希值，多端兼容性差且无法规避历史记录影响，生产环境需JS兜底。
:target 能做纯 CSS 弹窗，但不是“点一下就弹、再点一下就关”的黑盒组件——它本质是响应 URL 的 #id 变化，所有行为都绕不开这个前提。用错地方或忽略哈希状态，就会出现“点了没反应”“关不掉”“返回键乱跳”等问题。
为什么点击链接后:target样式不生效？
最常见原因是匹配失败，不是代码写错了，而是结构或语义没对齐：
-
href必须是#xxx格式，不能是javascript:void(0)或空href=""，否则不会触发哈希变更 - 目标元素必须有对应
id="xxx"，且该id在整个页面唯一；写成class="xxx"或data-id="xxx"都无效 -
:target只作用于被哈希直接指向的元素本身，不能写在父容器或通用类上，比如.modal:target无效，必须是#modal:target - 若页面已有滚动位置，iOS Safari 可能延迟重绘，可加
scroll-behavior: smooth缓解，但不能根治
如何让弹窗显示时有过渡动画？
直接用 display: none → display: block 无法加 transition，因为 display 不是可动画属性。正确做法是组合 visibility 和 opacity：
- 默认状态设为
visibility: hidden; opacity: 0; -
#modal:target中设为visibility: visible; opacity: 1; - 同时声明
transition: opacity 0.25s, visibility 0.25s;（注意：visibility 的过渡实际是“延迟生效”，需配合理解） - 必须加
position: fixed和z-index，否则元素仍参与文档流，隐藏/显示会引发页面重排抖动
关闭按钮为什么点一次关不掉？
根本原因是哈希没变——用户点开弹窗后 URL 变成 page.html#modal，再点关闭链接 href="#"，哈希从 #modal 变成空字符串 ""，这算一次变更，:target 退出；但如果关闭链接写成 href="#modal"，哈希不变，:target 就一直保持激活。
- 关闭链接应统一用
href="#"或href="#close"（且确保页面存在id="close"的空锚点） - 避免多个弹窗共用同一
id，否则哈希冲突，:target会意外匹配到错误元素 - 用户手动按浏览器返回键，会退回到上一个哈希状态（比如
#modal），而不是清空哈希——这不是 bug，是:target的天然行为，无法用 CSS 规避
移动端和历史记录有哪些隐性风险？
:target 在 Safari 和旧版 Android WebView 中表现不稳定，尤其涉及滚动、键盘弹出、transform 动画时：
- 点击输入框触发软键盘后，
fixed弹窗可能被顶出视口，且不自动回位 - 用
history.pushState()手动管理路由的 SPA 页面中，:target与 JS 路由容易冲突，哈希可能被覆盖或丢失 - 用户把带
#modal的 URL 加入书签，下次打开就直接弹窗——这对登录框、隐私提示等场景是严重体验缺陷 - 遮罩层必须与弹窗同级并用同一
:target控制（例如.overlay:target, .modal:target），否则点击遮罩无法关闭
真正难的不是写出第一版弹窗，而是处理哈希残留、多状态竞争、移动端重绘异常这些边界情况。一旦业务需要“必现”“必关”“不干扰路由”，就得引入 JS 做兜底——:target 是个优雅的原型工具，不是生产级交互方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
