使用 :target 伪类可实现锚点高亮,当 URL 中的 fragment 指向某元素时,该元素应用指定样式,如背景变黄、加边框等,示例中点击链接跳转至对应 id 元素并高亮显示,结合平滑滚动与过渡动画可提升用户体验,适用于文档页或帮助中心。

点击页面内的锚点链接时,让目标元素高亮显示,可以使用 CSS 的 :target 伪类来实现。这个方法无需 JavaScript,简单高效。
:target 伪类是什么?
:target 是一个 CSS 伪类,用于匹配当前 URL 中 fragment 标识符(即 # 后面的部分)指向的元素。例如,URL 为 page.html#section1 时,id 为 section1 的元素就会被 :target 选中。
如何实现锚点高亮?
只需要为带有 id 的目标元素定义 :target 样式,当用户点击锚链接跳转到该元素时,样式立即生效。
示例代码:
立即学习“前端免费学习笔记(深入)”;
这是第一段内容。
这是第二段内容。
当点击“跳转到第一项”时,页面滚动到 id 为 item1 的段落,并且该段落背景变为黄色,视觉上实现高亮效果。
增强用户体验的小技巧
- 添加平滑滚动:配合 scroll-behavior: smooth 让跳转更自然。
- 临时高亮后淡出:使用 transition 和 @keyframes 实现几秒后恢复默认样式。
- 避免干扰布局:高亮样式尽量不改变元素尺寸,以免页面跳动。
基本上就这些。用 :target 实现锚点高亮,轻量又实用,适合文档页、帮助中心等需要锚点导航的场景。










