:target伪类通过URL片段高亮对应ID元素，可用于内容定位、标签页或模态框显示。例如#section1匹配id="section1"元素，结合动画或display切换实现无JS交互，提升用户体验。
当页面 URL 中包含片段标识符（即以 # 开头的锚点）时，CSS 的 :target 伪类可以选中该 ID 对应的元素，从而为其应用特定样式。这个特性非常适合用于突出显示当前跳转到的内容区域，提升用户体验。
基本语法与原理
:target 匹配的是当前被锚链接指向的、ID 与 URL 片段一致的元素。
例如，URL 是page.html#section1，那么 ID 为 section1 的元素就会匹配 :target 伪类。使用方式如下：
#section1:target {
background-color: yellow;
padding: 10px;
border: 2px solid orange;
}常见应用场景
1. 高亮导航目标内容
点击目录跳转后，让对应章节短暂高亮，帮助用户快速定位。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<nav> <a href="#intro">简介</a> <a href="#detail">详情</a> </nav> <p><section id="intro">这里是简介内容</section> <section id="detail">这里是详细内容</section>
CSS 设置：
.highlight:target {
animation: highlightFade 2s ease-out;
}
<p>@keyframes highlightFade {
from { background-color: #ffeb3b; }
to { background-color: transparent; }
}这样用户点击锚点跳转后，目标区域会先亮黄再慢慢恢复，视觉引导更自然。
2. 实现简单的标签页或模态框（无需 JavaScript）
利用 :target 控制元素的 display 或 opacity，可实现基础的显隐效果。
例如模态框：
<a href="#modal">打开弹窗</a> <div class="modal" id="modal"> <p>这是弹窗内容</p> <a href="#">关闭</a> </div>
CSS 样式：
.modal {
display: none;
}
.modal:target {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 1px solid #ccc;
z-index: 1000;
}点击“打开弹窗”后，URL 变为 #modal，弹窗显示；点击关闭链接（href="#"），URL 片段清空，弹窗隐藏。
注意事项与技巧
:target 只作用于具有对应 ID 的单个元素，且必须是当前 URL 锚点匹配的元素。
- ID 必须唯一，否则行为不可预测
- 动画结束后样式会保留或消失，取决于你如何设置关键帧或属性
- 可用于配合过渡效果，如淡入、滑动等，增强交互感
- 在打印样式中通常不生效
基本上就这些。用好 :target 能在不写 JS 的情况下实现轻量级交互，适合静态页面或作为降级方案。关键是理解其依赖 URL 锚点的机制，合理设计 ID 和样式表现。不复杂但容易忽略。
