:target 是 css 伪类，当 url 片段标识符（如 #login）与页面中某元素的 id 完全匹配时自动生效，无需 js，纯靠浏览器地址栏变化驱动样式切换。
什么是 :target 伪类，它怎么触发
:target 只在 URL 中存在匹配的片段标识符（fragment identifier）时生效，比如访问 https://example.com/#login，页面中 id="login" 的元素就会被 :target 选中。它不依赖 JavaScript，也不需要监听事件，纯粹靠浏览器地址栏变化驱动样式切换。
关键点在于：必须是当前 URL 的 #xxx 和某个元素的 id="xxx" 完全一致，大小写敏感，且不能带空格或特殊字符（否则需编码，但建议只用字母数字和短横线）。
常见错误现象：:target 没反应？先检查是否漏写了 id，或者 URL 里用了 ?id=xxx 而不是 #xxx —— 查询参数不会触发 :target。
基础模态弹窗结构与核心 CSS 规则
结构上只需要一个带 id 的 <div>，再配一个跳转链接即可。不需要额外容器、遮罩层或按钮状态管理。
<ul>
<li>模态框默认用 <code>display: none 隐藏
:target 切换为 display: block 或 flex 等可见状态:target::before 伪元素实现，避免 DOM 冗余:target 无法响应 Escape，只能靠链接跳转到别的锚点（如 # 或 #top）来清空目标示例最小可行代码：
<a href="#modal">打开弹窗</a>
<div id="modal">
<p>这是内容</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<a href="#">× 关闭</a>
</div>
#modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
z-index: 1000;
}
#modal:target {
display: block;
}
#modal:target::before {
content: "";
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.6);
z-index: 999;
}
点击遮罩关闭弹窗的限制与绕过方法
直接给 ::before 遮罩加 href="#" 不行 —— 伪元素不是真实 DOM 节点，无法绑定链接或事件。所以“点击遮罩关闭”必须由真实元素承载。
可行做法只有两种：
- 把遮罩做成独立元素（如
<div id="modal-backdrop"></div>），并用相邻兄弟选择器联动：#modal:target ~ #modal-backdrop { display: block; } - 更轻量的做法：把
<a href="#"></a>放在遮罩层位置（绝对定位覆盖全屏），并确保它在:target时才显示：#modal:target + a.close-backdrop { display: block; }
性能影响很小，但要注意层级顺序：触发链接必须在模态框元素之前或之后，且用正确的选择器关系（+、~ 或 >）匹配，否则样式不生效。
兼容性与实际使用中的坑
:target 在所有现代浏览器中都支持（IE9+），但有两个容易被忽略的问题：
- 历史记录会累积：每次点击不同锚点都会新增一条 history 记录，用户狂点返回可能卡住。可用
history.replaceState()修复，但这就要引入 JS —— 一旦加 JS，不如直接用 JS 控制显隐，:target的“纯 CSS”优势就瓦解了 - SEO 和可访问性风险：搜索引擎可能索引
#xxx页面片段，但屏幕阅读器对:target的焦点行为支持不一；最好配合tabindex="-1"和focus()（又得 JS）才能真正聚焦到弹窗内 - 动画难控制：CSS
transition对display无效，必须改用opacity+visibility或transform，且初始状态要设对（比如visibility: hidden而非display: none）
如果项目要求严格可访问、需键盘导航或带淡入动画，:target 方案很快会触达边界 —— 它适合快速原型、文档内轻量交互，不适合复杂业务弹窗。
