:target 选择器可高亮锚点跳转的元素，提升用户体验。它匹配 url 片段标识符指向的元素，如 #section1 会选中 id="section1" 的元素。通过 css 设置 background-color、border 等样式可使目标区域更醒目，示例中 section:target 添加黄色背景和橙色边框。进阶用法包括 transition 实现背景色渐变，或 @keyframes 创建闪烁动画。实用建议有：确保 id 唯一，避免作用于 body，结合 scroll-margin-top 解决固定头部遮挡，测试移动端显示效果。合理使用 :target 能增强导航友好性，让用户明确当前定位。
当页面通过锚点跳转到特定元素时，可以用 :target 选择器让目标元素高亮显示，提升用户体验。这个方法不需要 JavaScript，纯 CSS 即可实现。
什么是 :target 选择器？
:target 是一个 CSS 伪类，它匹配当前 URL 中片段标识符（即 # 后面的部分）指向的元素。例如，URL 为 example.html#section1 时，:target 就会选中 id="section1" 的元素。
基本用法：高亮目标区域
你可以为被锚点定位到的元素设置背景色、边框或阴影，使其更醒目。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<style>
section:target {
background-color: #ffeb3b;
padding: 20px;
border-left: 4px solid #ff9800;
}
</style>
<p><a href="#intro">跳转到介绍</a>
<a href="#setup">跳转到配置</a></p><p><section id="intro">
<h2>介绍</h2>
<p>这是介绍内容...</p>
</section></p><p><section id="setup">
<h2>配置</h2>
<p>这是配置内容...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/838" title="A1.art"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d76a86508452.png" alt="A1.art" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/838" title="A1.art">A1.art</a>
<p>一个创新的AI艺术应用平台，旨在简化和普及艺术创作</p>
</div>
<a href="/ai/838" title="A1.art" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</section></p>点击链接后，对应 section 会获得黄色背景和橙色边框，视觉上明显突出。
进阶技巧：平滑高亮与动画效果
为了让高亮更自然，可以添加过渡或短暂动画。
例如，让背景色淡入淡出：
section {
transition: background-color 1s ease;
}
<p>section:target {
background-color: #ffeb3b;
}</p>或者使用 @keyframes 实现闪烁提示：
section:target {
animation: highlight 1.5s ease;
}
<p>@keyframes highlight {
0% { background-color: #ffeb3b; }
100% { background-color: transparent; }
}</p>实用建议
使用 :target 时注意以下几点：
- 确保每个目标元素都有唯一 id，否则无法正确匹配
- 避免对整个页面 body 使用 :target，可能影响布局
- 结合 scroll-margin-top 处理固定头部遮挡问题
- 在移动端测试表现，确保高亮清晰可见
基本上就这些。合理使用 :target 能让页面导航更友好，用户一眼就知道跳转到了哪里。不复杂但容易忽略的小技巧。
