:target伪类可实现锚点高亮,通过CSS为URL中fragment对应的元素添加醒目样式,如背景色和阴影,提升页面可读性与用户体验。

当用户点击页面内的锚链接,跳转到对应元素时,可以利用 :target 伪类来高亮显示该锚点元素。这个方法无需 JavaScript,纯 CSS 即可实现。
什么是 :target 伪类?
:target 是一个 CSS 伪类,它匹配当前 URL 中 fragment 标识符(即 # 后面的部分)指向的元素。例如,URL 为 example.html#section1 时,ID 为 section1 的元素就会被 :target 选中。
如何用 :target 实现锚点高亮
你可以为被激活的目标元素设置背景色、边框、阴影等样式,使其在页面中更醒目。
示例代码:
立即学习“前端免费学习笔记(深入)”;
跳转到第一节
跳转到第二节
第一节内容
这是第一部分内容。
第二节内容
这是第二部分内容。
实用建议与注意事项
- 确保每个目标元素都有唯一 ID,否则 :target 无法正确匹配
- 高亮样式应明显但不刺眼,推荐使用浅黄色背景或轻微发光效果
- 可结合 scroll-margin-top 避免锚点被固定头部遮挡
- 支持所有现代浏览器,IE9 及以上也支持
基本上就这些。使用 :target 制作锚点高亮简单有效,特别适合文档页、帮助中心或长文阅读场景,提升用户体验。










