仅靠:target可实现点击弹出层，但需满足硬性前提：弹出层元素必须有唯一id，链接href必须为#id格式；浏览器通过URL哈希变化触发匹配，而非监听点击事件。
点击链接触发弹出层，不用JS只靠:target
能做，但有硬性前提：弹出层必须对应一个带id的元素，且触发链接的href必须是#id格式。浏览器靠URL哈希变化驱动:target匹配，不是监听点击事件——这点常被忽略，导致“点了没反应”。
常见错误现象：:target样式写了但不生效；点击后URL变了，弹窗却没显示；关闭后页面还停留在#xxx状态。
- 确保弹出层容器有唯一
id，比如… - 触发链接写成
@#@#@#@#@#@#@#@#@#@0，不能漏掉# -
:target选择器必须精确匹配该id，如#modal-login:target { display: block; }，不能写成div:target或.modal:target
:target控制显示/隐藏时的CSS写法要点
核心逻辑是：默认隐藏弹出层（display: none），用:target覆盖为display: block或flex等。但直接设display会导致过渡动画失效，因为display不可动画。
性能与体验影响：如果用opacity + visibility替代display，就能加transition，但要注意visibility: hidden仍占布局空间，需配合position: fixed和z-index避免页面抖动。
- 推荐写法：
#modal:target { opacity: 1; visibility: visible; }，配合transition: opacity 0.2s, visibility 0.2s - 必须给弹出层设
position: fixed，否则:target可能影响文档流中其他元素 - 关闭方式只能是跳转到另一个
id、或清空哈希（如×>），没有“点击遮罩关闭”的纯CSS方案
兼容性与移动端适配陷阱
:target在IE9+、Chrome、Firefox、Safari均支持，但iOS Safari有个老问题：哈希变化时若页面已滚动，:target样式可能延迟应用或不触发重绘。
容易踩的坑：position: fixed在早期Android WebView中表现异常；iOS上点击链接后键盘弹出可能遮挡弹层；返回按钮行为不可控——用户点返回会退回到上一个哈希状态，而不是关闭弹层。
- 加
scroll-behavior: smooth到html可缓解滚动突兀，但不解决根本问题 - 移动端建议加
min-height: 100vh到弹层父容器，防止内容过短时遮罩不全屏 - 不要依赖
:target做关键业务流程（如支付确认），因哈希可被手动修改或书签保存
为什么关不掉？哈希残留和多弹层冲突
最常被忽略的是URL哈希残留。用户点开弹层后，即使点了关闭链接href="#"，地址栏仍可能是#modal-login，下次再点同一链接就不再触发:target（因为哈希没变）。
多个弹层共存时，:target只会匹配当前URL哈希对应的那一个，但CSS若写成.modal:target这种泛化选择器，就会误匹配所有同名class的元素。
- 关闭链接必须用明确的
href=""或href="#"，并确保它真能清掉原哈希 - 每个弹层用独立
id，CSS规则严格按#id:target写，别偷懒用class - 测试时手动改地址栏哈希，看是否实时响应——这是验证
:target是否真正生效的最快方式
事情说清了就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
