17370845950

使用 :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 实现锚点高亮，轻量又实用，适合文档页、帮助中心等需要锚点导航的场景。