能实现，但只适用于“点击链接触发、再点链接关闭”的简单弹窗，不支持点击遮罩关闭、esc键关闭或键盘导航；:target弹窗必须满足三个硬性前提：弹窗容器有唯一id、触发链接href为#id格式、关闭链接清空哈希；display不可动画，需改用opacity+visibility配合transition；必须设position:fixed和高z-index；ios safari存在哈希重绘延迟，可用transform:translatez(0)强制重绘；纯css无法处理焦点管理，无障碍需js补充。
能实现，但只适用于“点击链接触发、再点链接关闭”的简单弹窗，不支持点击遮罩关闭、ESC键关闭或键盘导航。
:target 弹窗必须满足的三个硬性前提
浏览器靠 URL 哈希变化驱动 :target，不是监听点击——这点错了就全白搭。
- 弹窗容器必须有唯一
id，比如<div id="modal-contact"></div> - 触发链接的
href必须是#modal-contact格式，不能漏掉#，也不能写成.modal或其他选择器 - 关闭链接的
href必须清空哈希，常用写法是href="#"或href=""（后者在部分浏览器会跳到页面顶部）
为什么 display: none + :target 会断掉过渡动画？
display 属性不可动画，直接从 none 切到 block 会导致 transition 完全失效。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 正确做法：用
opacity: 0+visibility: hidden初始化弹窗，再用:target恢复为opacity: 1和visibility: visible - 必须同时写
transition: opacity 0.2s, visibility 0.2s，否则visibility切换仍无渐变 -
position: fixed和足够高的z-index不可省，否则弹窗可能被其他元素遮挡或影响文档流
移动端 Safari 的哈希重绘延迟怎么绕过？
iOS Safari 在页面已滚动时，:target 样式可能延迟应用甚至不触发——这不是 bug，是渲染优化策略导致的。
- 加一行强制重绘：在
:target规则里补上transform: translateZ(0)或will-change: opacity - 避免依赖
height: auto动画，CSS 无法过渡到auto；改用max-height配合溢出控制 - 不要把弹窗放在
overflow: hidden的父容器里，否则:target无法突破限制显示
真正容易被忽略的，是哈希变化后焦点不会自动落到弹窗内——这意味着键盘用户无法 Tab 进入、屏幕阅读器也感知不到。生产环境若需无障碍，:target 方案必须搭配少量 JS 补齐焦点管理，纯 CSS 做不到这点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
