使用 :target 伪类可实现锚点高亮，当 URL 中的 fragment 指向某元素时，该元素应用指定样式，如背景变黄、加边框等，示例中点击链接跳转至对应 id 元素并高亮显示，结合平滑滚动与过渡动画可提升用户体验，适用于文档页或帮助中心。
点击页面内的锚点链接时，让目标元素高亮显示，可以使用 CSS 的 :target 伪类来实现。这个方法无需 JavaScript，简单高效。
: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 的段落，并且该段落背景变为黄色，视觉上实现高亮效果。
基本上就这些。用 :target 实现锚点高亮，轻量又实用，适合文档页、帮助中心等需要锚点导航的场景。
以上就是css伪类:target实现页面锚点高亮的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
614
收藏
