:target伪类通过URL片段高亮对应ID元素，可用于内容定位、标签页或模态框显示。例如#section1匹配id=”section1″元素，结合动画或display切换实现无JS交互，提升用户体验。
当页面 URL 中包含片段标识符（即以 # 开头的锚点）时，CSS 的 :target 伪类可以选中该 ID 对应的元素，从而为其应用特定样式。这个特性非常适合用于突出显示当前跳转到的内容区域，提升用户体验。
基本语法与原理
:target 匹配的是当前被锚链接指向的、ID 与 URL 片段一致的元素。
例如，URL 是 page.html#section1，那么 ID 为 section1 的元素就会匹配 :target 伪类。
使用方式如下：
#section1:target { background-color: yellow; padding: 10px; border: 2px solid orange;}
常见应用场景
1. 高亮导航目标内容
点击目录跳转后，让对应章节短暂高亮，帮助用户快速定位。
示例代码：
立即学习“前端免费学习笔记（深入）”；
这里是简介内容 这里是详细内容
.highlight:target { animation: highlightFade 2s ease-out;}
@keyframes highlightFade {from { background-color: #ffeb3b; }to { background-color: transparent; }}
CSS 设置：
.highlight:target { animation: highlightFade 2s ease-out;}@keyframes highlightFade {from { background-color: #ffeb3b; }to { background-color: transparent; }}
这样用户点击锚点跳转后，目标区域会先亮黄再慢慢恢复，视觉引导更自然。
2. 实现简单的标签页或模态框（无需 JavaScript）
Qoder
阿里巴巴推出的AI编程工具
270 查看详情
利用 :target 控制元素的 display 或 opacity，可实现基础的显隐效果。
例如模态框：
打开弹窗这是弹窗内容
关闭
CSS 样式：
.modal { display: none;}.modal:target { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; z-index: 1000;}
点击“打开弹窗”后，URL 变为 #modal，弹窗显示；点击关闭链接（href="#"），URL 片段清空，弹窗隐藏。
注意事项与技巧
:target 只作用于具有对应 ID 的单个元素，且必须是当前 URL 锚点匹配的元素。
ID 必须唯一，否则行为不可预测动画结束后样式会保留或消失，取决于你如何设置关键帧或属性可用于配合过渡效果，如淡入、滑动等，增强交互感在打印样式中通常不生效
基本上就这些。用好 :target 能在不写 JS 的情况下实现轻量级交互，适合静态页面或作为降级方案。关键是理解其依赖 URL 锚点的机制，合理设计 ID 和样式表现。不复杂但容易忽略。
以上就是CSS伪类:target如何使用_锚点元素样式控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/949228.html
微信扫一扫 
支付宝扫一扫 
