:target是CSS原生伪类，当URL fragment（#xxx）与页面元素id匹配时生效，无需JS即可响应点击触发显隐、支持历史回退；其核心能力源于浏览器对hash变化的原生监听与样式即时响应。
什么是 :target，它为什么能替代 JS 控制显隐
:target 是 CSS 原生伪类，当 URL 的 fragment（即 #xxx 部分）与页面中某个元素的 id 匹配时，该元素就成为「目标元素」，:target 选择器便生效。它不依赖 JS，天然具备“点击触发 → 样式响应 → 浏览器历史记录可回退”的能力，正好契合模态弹窗的核心交互逻辑。
关键前提：必须有可跳转的锚点（如 <a href="#modal">），且目标容器要有对应 id="modal"。浏览器会自动滚动到该元素（这点有时需要覆盖）。
基础结构怎么搭才不翻车
常见错误是把 display: none 直接写在弹窗容器上，导致 :target 无法生效——因为 :target 只能修改已渲染元素的样式，不能“让一个根本没渲染的元素显示”。正确做法是用 visibility 或 opacity + pointer-events 配合过渡。
- 弹窗容器必须有
id（如id="login-modal"），且初始状态为可见但不可交互：visibility: hidden; opacity: 0; pointer-events: none; - 触发链接必须带
href="#login-modal"，不能用javascript:void(0)或空href - 关闭按钮只需一个指向
href="#"或href="#close"（并确保页面存在id="close"的空元素）即可“取消 target” - 避免给弹窗加
position: fixed同时又设top: 0—— 这会导致点击后页面强制滚动到顶部，干扰体验
:target 模态窗的最小可行 CSS 写法
以下是最简可靠组合，兼顾可访问性、过渡动画和关闭逻辑：
立即学习“前端免费学习笔记（深入）”；
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 400px;
padding: 24px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
/* 初始隐藏 */
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s step-end;
}
dialog:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
/* 防止点击背景关闭时触发页面滚动 */
dialog:target::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: -1;
}注意：step-end 在 visibility 过渡中很关键——它确保 visibility 不参与缓动，只在动画结束瞬间切换，避免中间状态出现“看不见但可交互”的 bug。
移动端适配和 Safari 兼容要注意什么
Safari 对 :target 的 fragment 匹配较严格：如果 URL 是 https://site.com/#modal，但页面加载时 hash 已存在，部分旧版 Safari 可能不会触发 :target 样式；iOS Safari 还可能因 position: fixed 导致输入框聚焦时键盘顶起页面错位。
- 务必在
<meta name="viewport">中设置height=device-height并禁用缩放（user-scalable=no）减少布局抖动 - 不要依赖
:target做表单提交后的状态重置——URL hash 改变会触发新 history entry，用户按返回键会回到弹窗打开状态，需配合window.onpopstate清理（这就绕回 JS 了） - 若需支持 iOS 键盘收起后恢复位置，得用
scroll-behavior: smooth+scrollIntoView({ block: 'center' })，但这已是 JS 补救范畴
纯 CSS :target 模态窗适合静态内容展示、确认提示、简单登录入口等场景；一旦涉及表单校验、异步加载或复杂状态管理，边界很快就会被触达。
