:target伪类可实现锚点高亮，通过CSS为URL中fragment对应的元素添加醒目样式，如背景色和阴影，提升页面可读性与用户体验。
当用户点击页面内的锚链接，跳转到对应元素时，可以利用 :target 伪类来高亮显示该锚点元素。这个方法无需 JavaScript，纯 CSS 即可实现。
什么是 :target 伪类？
:target 是一个 CSS 伪类，它匹配当前 URL 中 fragment 标识符（即 # 后面的部分）指向的元素。例如，URL 为 example.html#section1 时，ID 为 section1 的元素就会被 :target 选中。
如何用 :target 实现锚点高亮
你可以为被激活的目标元素设置背景色、边框、阴影等样式，使其在页面中更醒目。
示例代码：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
立即学习“前端免费学习笔记（深入）”；
.content-section { padding: 20px; margin: 10px 0; border: 1px solid #ddd; }.content-section:target {background-color: #ffeb3b;box-shadow: 0 0 10px yellow;border-color: #ff8f00;}
跳转到第一节
跳转到第二节
第一节内容
这是第一部分内容。
第二节内容
这是第二部分内容。
实用建议与注意事项
确保每个目标元素都有唯一 ID，否则 :target 无法正确匹配高亮样式应明显但不刺眼，推荐使用浅黄色背景或轻微发光效果可结合 scroll-margin-top 避免锚点被固定头部遮挡支持所有现代浏览器，IE9 及以上也支持
基本上就这些。使用 :target 制作锚点高亮简单有效，特别适合文档页、帮助中心或长文阅读场景，提升用户体验。
以上就是在css中如何用:target制作锚点高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032857.html
微信扫一扫 
支付宝扫一扫 
