:target 伪类用于匹配 URL 锚点指向的元素，通过 #id:target 可为其添加样式，实现高亮、标签页或无 JS 弹窗；支持主流浏览器，需确保 ID 单一，配合 transition 提升视觉效果。
当页面 URL 包含一个片段标识符（即以 # 开头的锚点）时，浏览器会尝试滚动到与该 ID 匹配的元素。利用 CSS 的 :target 伪类，我们可以为当前被锚点指向的元素添加特定样式，从而提升用户体验和交互性。
什么是 :target 伪类？
:target 是一个 CSS 伪类，用于匹配当前 URL 锚点所指向的元素。只有当某个元素的 ID 与地址栏中的片段一致时，该元素才会应用 :target 定义的样式。
例如，若 URL 为 page.html#section1，那么 ID 为 section1 的元素就会被 :target 选中。
基本语法与使用示例
使用方式非常简单，只需在选择器后加上 :target 即可：
#my-section:target { background-color: yellow; padding: 10px; border: 2px solid red;}
当用户点击链接跳转到该锚点时，对应的内容区域将高亮显示，帮助用户快速识别定位位置。
立即学习“前端免费学习笔记（深入）”；
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
实用应用场景
内容高亮：在文档或帮助页面中，让目标段落短暂高亮，提高可读性。简易标签页（Tab）效果：不使用 JavaScript，仅通过锚点切换显示不同内容块。弹窗展示：配合 opacity 和 visibility，实现基于锚点的模态框或提示层。
例如，实现一个无 JS 的弹窗：
.modal { display: none;}.modal:target { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;}
通过 打开弹窗 触发显示，再用关闭链接跳回默认状态（如 关闭）。
注意事项与兼容性
:target 支持现代主流浏览器，包括 IE9+，移动端也完全可用。但需注意：
ID 必须唯一，否则多个元素可能同时被匹配。无法监听锚点变化事件（这属于 JavaScript 范畴）。动画过渡建议配合 transition 使用，使视觉更自然。
基本上就这些。合理使用 :target 可以在不依赖脚本的情况下增强页面交互，尤其适合轻量级项目或渐进增强设计。
以上就是css伪类:target锚点定位样式应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1055388.html
微信扫一扫 
支付宝扫一扫 
