css伪类:target实现页面锚点高亮

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

点击页面内的锚点链接时，让目标元素高亮显示，可以使用 CSS 的 :target 伪类来实现。这个方法无需 JavaScript，简单高效。

:target 伪类是什么？

:target 是一个 CSS 伪类，用于匹配当前 URL 中 fragment 标识符（即 # 后面的部分）指向的元素。例如，URL 为 page.html#section1 时，id 为 section1 的元素就会被 :target 选中。

如何实现锚点高亮？

只需要为带有 id 的目标元素定义 :target 样式，当用户点击锚链接跳转到该元素时，样式立即生效。

示例代码：

立即学习“前端免费学习笔记（深入）”；

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

<style><br>  :target {<br>    background-color: yellow;<br>    padding: 10px;<br>    border: 2px solid orange;<br>    border-radius: 4px;<br>    font-weight: bold;<br>  }<br></style><br><br><ul><br>  <li><a href="#item1">跳转到第一项</a></li><br>  <li><a href="#item2">跳转到第二项</a></li><br></ul><br><br><p id="item1">这是第一段内容。</p><br><p id="item2">这是第二段内容。</p>

当点击“跳转到第一项”时，页面滚动到 id 为 item1 的段落，并且该段落背景变为黄色，视觉上实现高亮效果。

增强用户体验的小技巧

• 添加平滑滚动：配合 scroll-behavior: smooth 让跳转更自然。
• 临时高亮后淡出：使用 transition 和 @keyframes 实现几秒后恢复默认样式。
• 避免干扰布局：高亮样式尽量不改变元素尺寸，以免页面跳动。

基本上就这些。用 :target 实现锚点高亮，轻量又实用，适合文档页、帮助中心等需要锚点导航的场景。