:target 伪类用于匹配 URL 片段标识符指向的元素，使其在锚点跳转时应用特定样式。例如 h2:target { background-color: yellow; } 可高亮目标标题。常用于内容高亮、选项卡切换等无需 JavaScript 的交互效果。通过设置 div { display: none; } 和 div:target { display: block; }，可实现点击链接显示对应内容区域。需注意：仅 id 匹配 :target，页面加载时无 hash 不触发，不支持 IE8 及以下，且只能基于 id 使用。该特性适用于静态页面轻量交互。
:target 伪类在 CSS 中用于匹配当前 URL 的片段标识符（即锚点）所指向的元素。当页面中的某个锚点被激活（比如点击链接跳转到该锚点），这个元素就会被 :target 选中，从而可以为其应用特定样式。
基本用法
假设页面中有如下 HTML 结构：
章节一
这是章节一的内容...
跳转到章节一
你可以使用 :target 来高亮当前跳转到的元素：
h2:target {
background-color: yellow;
color: #333;
}
当用户点击链接跳转到 #section1 时，id 为 section1 的 h2 元素背景会变成黄色。
常见应用场景
利用 :target 可以实现一些无需 JavaScript 的交互效果。内容高亮：让用户更清楚地看到跳转到了哪一节。 显示隐藏内容：结合 display 属性实现简单的选项卡或展开效果。
例如，做一个简易的选项卡：
立即学习“前端免费学习笔记（深入）”；
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
内容区域 1内容区域 2
显示区域1
显示区域2
CSS 控制只显示当前目标区域：
div {
display: none;
}
div:target {
display: block;
}
这样，点击不同的链接，只有对应的目标 div 会显示出来。
注意事项
使用 :target 时需注意以下几点：只有拥有对应 id 的元素才能被 :target 匹配。 URL 中必须包含 #id 才会触发，初始页面加载若无 hash，不会命中任何 :target。 不支持 IE8 及以下版本，现代浏览器均支持良好。 不能用于 class 或其他属性，只能基于 id。基本上就这些。通过 :target 配合锚点跳转，可以在不写 JS 的情况下实现轻量级交互效果，适合静态页面或简化逻辑时使用。
以上就是css :target伪类在锚点跳转中怎么使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1016925.html
微信扫一扫 
支付宝扫一扫 
