:target 伪类用于匹配 URL 片段标识符指向的元素，使其在锚点跳转时应用特定样式。例如 h2:target { background-color: yellow; } 可高亮目标标题。常用于内容高亮、选项卡切换等无需 JavaScript 的交互效果。通过设置 div { display: none; } 和 div:target { display: block; }，可实现点击链接显示对应内容区域。需注意：仅 id 匹配 :target，页面加载时无 hash 不触发，不支持 IE8 及以下，且只能基于 id 使用。该特性适用于静态页面轻量交互。
:target 伪类在 CSS 中用于匹配当前 URL 的片段标识符（即锚点）所指向的元素。当页面中的某个锚点被激活（比如点击链接跳转到该锚点），这个元素就会被 :target 选中，从而可以为其应用特定样式。
<h2 id="section1">章节一</h2><br><p>这是章节一的内容...</p><br><br><a href="#section1">跳转到章节一</a>
h2:target {<br> background-color: yellow;<br> color: #333;<br>}#section1 时，id 为 section1 的 h2 元素背景会变成黄色。
例如，做一个简易的选项卡：
立即学习“前端免费学习笔记（深入）”；
<div id="tab1">内容区域 1</div><br><div id="tab2">内容区域 2</div><br><br><a href="#tab1">显示区域1</a><br><a href="#tab2">显示区域2</a>
CSS 控制只显示当前目标区域：
div {<br> display: none;<br>}<br><br>div:target {<br> display: block;<br>}#id 才会触发，初始页面加载若无 hash，不会命中任何 :target。以上就是css :target伪类在锚点跳转中怎么使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
337
收藏
