CSS:target实现页面锚点高亮技巧

CSS `:target` 伪类是网页开发中一个强大的工具，它允许开发者根据 URL 中的锚点（#id）定位到页面中的特定元素，并为其应用特定的 CSS 样式。例如，可以利用 `:target` 实现页面内导航的高亮效果，或者创建无需 JavaScript 的选项卡切换功能，极大地提升用户体验。本文将深入探讨 `:target` 的基本用法，包括如何通过 CSS 代码实现高亮显示和动画效果，以及常见的应用场景，如动态内容加载提示和增强视觉反馈。同时，我们也会关注使用 `:target` 的注意事项，例如浏览器兼容性问题和适用范围，助你更好地在项目中运用这一特性，实现简洁高效的网页交互。

: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>}

常见应用场景

• 内容高亮：让用户更清楚地看到跳转到了哪一节。
• 显示隐藏内容：结合 display 属性实现简单的选项卡或展开效果。

例如，做一个简易的选项卡：

<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 的元素才能被 :target 匹配。
• URL 中必须包含 #id 才会触发，初始页面加载若无 hash，不会命中任何 :target。
• 不支持 IE8 及以下版本，现代浏览器均支持良好。
• 不能用于 class 或其他属性，只能基于 id。

今天关于《CSS:target实现页面锚点高亮技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！