使用 :target 伪类可实现锚点高亮，当 URL 中的 fragment 指向某元素时，该元素应用指定样式，如背景变黄、加边框等，示例中点击链接跳转至对应 id 元素并高亮显示，结合平滑滚动与过渡动画可提升用户体验，适用于文档页或帮助中心。
点击页面内的锚点链接时，让目标元素高亮显示，可以使用 CSS 的 :target 伪类来实现。这个方法无需 JavaScript，简单高效。
:target 伪类是什么？
:target 是一个 CSS 伪类，用于匹配当前 URL 中 fragment 标识符（即 # 后面的部分）指向的元素。例如，URL 为 page.html#section1 时，id 为 section1 的元素就会被 :target 选中。
如何实现锚点高亮？
只需要为带有 id 的目标元素定义 :target 样式，当用户点击锚链接跳转到该元素时，样式立即生效。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<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 实现锚点高亮，轻量又实用，适合文档页、帮助中心等需要锚点导航的场景。
