CSStarget伪类实现锚点高亮技巧

还在为网页锚点跳转后难以定位而烦恼吗？本文教你如何利用CSS的`:target`伪类，轻松实现锚点高亮效果，无需JavaScript，纯CSS即可搞定！`:target`伪类能够匹配当前URL中`#`后标识符对应的元素，通过为其添加醒目的背景色、边框或阴影等样式，在用户点击锚链接跳转后，清晰突出显示目标内容区域，有效提升页面可读性和用户体验。了解`:target`伪类的基本概念、使用方法，以及实用建议，让你的网页导航更加友好。适用于文档页、帮助中心等长文阅读场景，立即学习，让你的网站焕发新活力！

:target伪类可实现锚点高亮，通过CSS为URL中fragment对应的元素添加醒目样式，如背景色和阴影，提升页面可读性与用户体验。

当用户点击页面内的锚链接，跳转到对应元素时，可以利用 :target 伪类来高亮显示该锚点元素。这个方法无需 JavaScript，纯 CSS 即可实现。

什么是 :target 伪类？

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

如何用 :target 实现锚点高亮

你可以为被激活的目标元素设置背景色、边框、阴影等样式，使其在页面中更醒目。

示例代码：

<style>
  .content-section {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ddd;
  }
<p>.content-section:target {
background-color: #ffeb3b;
box-shadow: 0 0 10px yellow;
border-color: #ff8f00;
}
</style></p><p><h2><a href="#section1">跳转到第一节</a></h2>
<h2><a href="#section2">跳转到第二节</a></h2></p><p><div id="section1" class="content-section">
<h3>第一节内容</h3>
<p>这是第一部分内容。</p>
</div></p><p><div id="section2" class="content-section">
<h3>第二节内容</h3>
<p>这是第二部分内容。</p>
</div></p>

实用建议与注意事项

• 确保每个目标元素都有唯一 ID，否则 :target 无法正确匹配
• 高亮样式应明显但不刺眼，推荐使用浅黄色背景或轻微发光效果
• 可结合 scroll-margin-top 避免锚点被固定头部遮挡
• 支持所有现代浏览器，IE9 及以上也支持

基本上就这些。使用 :target 制作锚点高亮简单有效，特别适合文档页、帮助中心或长文阅读场景，提升用户体验。

以上就是《CSStarget伪类实现锚点高亮技巧》的详细内容，更多关于的资料请关注golang学习网公众号！