CSS:target选择器实现锚点高亮效果

CSS 的 `:target` 选择器是一种轻量、高效且无需 JavaScript 的纯 CSS 技术，能自动高亮 URL 片段标识符（如 `#section1`）所指向的页面元素，显著提升锚点导航的可视性与用户体验；通过简单的背景色、边框或过渡动画即可实现醒目提示，配合 `scroll-margin-top` 可规避固定头部遮挡问题，兼顾响应式与跨端兼容性——这个常被忽视的小技巧，正以极简方式让网页导航更直观、更友好。

当页面通过锚点跳转到特定元素时，可以用 :target 选择器让目标元素高亮显示，提升用户体验。这个方法不需要 JavaScript，纯 CSS 即可实现。

什么是 :target 选择器？

:target 是一个 CSS 伪类，它匹配当前 URL 中片段标识符（即 # 后面的部分）指向的元素。例如，URL 为 example.html#section1 时，:target 就会选中 id="section1" 的元素。

基本用法：高亮目标区域

你可以为被锚点定位到的元素设置背景色、边框或阴影，使其更醒目。

示例代码：

跳转到介绍
跳转到配置

介绍
这是介绍内容...

配置
这是配置内容...

点击链接后，对应 section 会获得黄色背景和橙色边框，视觉上明显突出。

进阶技巧：平滑高亮与动画效果

为了让高亮更自然，可以添加过渡或短暂动画。

例如，让背景色淡入淡出：

section {
  transition: background-color 1s ease;
}
section:target {
background-color: #ffeb3b;
}

或者使用 @keyframes 实现闪烁提示：

section:target {
  animation: highlight 1.5s ease;
}
@keyframes highlight {
0% { background-color: #ffeb3b; }
100% { background-color: transparent; }
}

实用建议

使用 :target 时注意以下几点：

• 确保每个目标元素都有唯一 id，否则无法正确匹配
• 避免对整个页面 body 使用 :target，可能影响布局
• 结合 scroll-margin-top 处理固定头部遮挡问题
• 在移动端测试表现，确保高亮清晰可见

基本上就这些。合理使用 :target 能让页面导航更友好，用户一眼就知道跳转到了哪里。不复杂但容易忽略的小技巧。

终于介绍完啦！小伙伴们，这篇关于《CSS:target选择器实现锚点高亮效果》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！