使用 :target 伪类可实现锚点高亮，通过匹配 URL 中的 fragment 标识符来选中目标元素并应用样式，如改变背景色、添加边框或结合动画提升视觉反馈，常用于文档或单页应用中，无需 JavaScript 即可增强用户体验。
当用户点击页面内的锚点链接时，可以通过 CSS 的 :target 伪类来高亮显示对应的目标元素。这种效果常用于文档、帮助页面或单页应用中，让用户清楚地看到跳转到了哪个部分。
1. 基本原理
:target 是一个 CSS 伪类，它匹配当前 URL 中 fragment 标识符（即 # 后面的部分）所指向的元素。例如，URL 为 example.com#section1 时，#section1 就是目标，而 id 为 section1 的元素就会被 :target 选中。
2. 实现锚点高亮的基本方法
只需要为带有 id 的目标元素设置 :target 样式即可实现高亮：
section:target { background-color: yellow; padding: 10px; border-left: 4px solid orange;}第一节内容
这里是第一部分内容。
第二节内容
这里是第二部分内容。
3. 常见高亮方式与优化建议
可以根据设计需求选择不同的视觉反馈方式：
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 背景色变化：最直接的方式，如将背景变为浅黄或浅蓝。添加边框或外边距：让目标区域更突出。滚动偏移补偿：如果页面有固定头部，可配合 margin 或 scroll-margin-top 避免内容被遮挡：
section { scroll-margin-top: 60px; /* 留出固定头部的空间 */}
4. 可选增强效果
可以结合 transition 或 animation 制作更自然的提示效果：
section:target { animation: highlight 1s ease-in-out;}@keyframes highlight {0% { background-color: #ff0; }100% { background-color: #fff; }}
这样会在跳转后短暂闪烁黄色背景，再恢复，引导用户注意力。
基本上就这些。使用 :target 实现锚点高亮简单高效，无需 JavaScript，兼容性也很好。关键是确保目标元素有正确的 id，并合理设计样式提升可读性。
以上就是如何用css :target制作锚点高亮效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1004647.html
微信扫一扫 
支付宝扫一扫 
