如何用css :target制作锚点高亮效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何用css :target制作锚点高亮效果

2025-10-19

浏览次数：次

返回列表

使用 :target 伪类可实现锚点高亮，通过匹配 URL 中的 fragment 标识符来选中目标元素并应用样式，如改变背景色、添加边框或结合动画提升视觉反馈，常用于文档或单页应用中，无需 J*aScript 即可增强用户体验。

如何用css :target制作锚点高亮效果

当用户点击页面内的锚点链接时，可以通过 CSS 的 :target 伪类来高亮显示对应的目标元素。这种效果常用于文档、帮助页面或单页应用中，让用户清楚地看到跳转到了哪个部分。

1. 基本原理

:target 是一个 CSS 伪类，它匹配当前 URL 中 fragment 标识符（即 # 后面的部分）所指向的元素。例如，URL 为 example.com#section1 时，#section1 就是目标，而 id 为 section1 的元素就会被 :target 选中。

2. 实现锚点高亮的基本方法

只需要为带有 id 的目标元素设置 :target 样式即可实现高亮：

<style>
section:target {
  background-color: yellow;
  padding: 10px;
  border-left: 4px solid orange;
}
</style>
<p><a href="#section1">跳转到第一节</a>
<a href="#section2">跳转到第二节</a></p><p><section id="section1">
<h3>第一节内容</h3>
<p>这里是第一部分内容。</p>
</section></p><p><section id="section2">
<h3>第二节内容</h3>
<p>这里是第二部分内容。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1540">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a213277e9355.png" alt="AI Surge Cloud">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1540">AI Surge Cloud</a>
                            <p>低代码数据分析平台，帮助企业快速交付深度数据</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI Surge Cloud">
                                <span>87</span>
                            </div>
                        </div>
                        <a href="/ai/1540" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI Surge Cloud">
                        </a>
                    </div>
                
</section></p>

3. 常见高亮方式与优化建议

可以根据设计需求选择不同的视觉反馈方式：

背景色变化：最直接的方式，如将背景变为浅黄或浅蓝。
添加边框或外边距：让目标区域更突出。
滚动偏移补偿：如果页面有固定头部，可配合 margin 或 scroll-margin-top 避免内容被遮挡：

section {
  scroll-margin-top: 60px; /* 留出固定头部的空间 */
}

4. 可选增强效果

可以结合 transition 或 animation 制作更自然的提示效果：

section:target {
  animation: highlight 1s ease-in-out;
}
<p>@keyframes highlight {
0%   { background-color: #ff0; }
100% { background-color: #fff; }
}</p>

这样会在跳转后短暂闪烁黄色背景，再恢复，引导用户注意力。

基本上就这些。使用 :target 实现锚点高亮简单高效，无需 J*aScript，兼容性也很好。关键是确保目标元素有正确的 id，并合理设计样式提升可读性。

以上就是如何用css :target制作锚点高亮效果的详细内容，更多请关注其它相关文章！

# 就会 # 龙岩网站推广引流 # 如何对蒙牛网站就行优化 # 天河公司网站优化推广技巧 # 医院网站建设现状 # 河源联客易seo # 太仓关键词排名推广 # 律师网站建设的知识 # SEO推广如何写软文 # 驻马店百度推广营销 # 像官方的营销号怎么做推广 # 文档 # css # 两种类型 # 是一个 # 背景色 # 跳转到 # 中不 # 第二节 # 跳转 # 如何用 # java # javascript