一、原理解析
CSS :target 的工作原理
在前端开发中，:target 伪类用于标识当前 URL 哈希锚点所指向的元素。当浏览器的地址栏显示类似 #section1 的哈希时，页面中 id="section1" 的元素会被应用 :target 状态，这使得我们可以仅用 CSS 就实现锚点高亮的效果。
换句话说，:target 是一种不可依赖额外 JavaScript 的“状态切换”机制，它会在哈希变化时自动切换目标元素的样式，提升性能和可维护性。
需要注意的是，在同一时刻只有一个元素会处于 :target 状态，除非存在重复的 id，这通常是一个应当避免的结构问题。
第一节标题
...
第二节标题
...
第三节标题
...
二、实战技巧
为锚点高亮设定样式的实用方法
要在页面中实现“锚点高亮”的效果，最直接的做法是给 :target 应用可见的视觉样式，例如背景色、边框或阴影，以便用户清晰定位当前阅读的位置。
要点1：使用渐变或过渡让高亮更加平滑，避免突兀跳动，提升用户体验。
以下是一个常用的实现思路：将目标区块设置背景色、圆角和轻微的过渡效果，同时为固定头部的页面设置滚动偏移，确保内容不会被遮挡。
:root {--target-bg: #fff6c2;--target-outline: 3px solid #ff9800;
}
:target {background: var(--target-bg);outline: var(--target-outline);outline-offset: 6px;border-radius: 6px;scroll-margin-top: 5rem; /* 适配固定头部高度 */transition: background-color 0.25s ease, outline-color 0.25s ease;
}
html {scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {:target {transition: none;}
}通过上述设置，当前锚点对应的区域会呈现高亮背景和可见轮廓，用户也能在使用浏览器内置的“跳转到锚点”功能时获得明确的视觉反馈。
为了提升可访问性，建议同时使用键盘聚焦样式，例如对 :focus-visible 增加额外的轮廓，以确保通过键盘导航时也能清晰看到目标区域的突出效果。
/* 键盘导航的可见聚焦样式 */
:focus-visible {outline: 2px dashed #0a74da;outline-offset: 4px;
}三、无障碍与兼容性考虑
可访问性要点
在实现锚点高亮时，可访问性是一个不可忽视的方面。确保高亮的视觉效果对比度充足，且在屏幕阅读器使用时不会干扰内容的线性读取。
同样重要的是对 颜色对比进行测试，避免仅依赖色彩来传达状态信息，可以结合文本或图标来传达高亮含义。
关于浏览器兼容性，大多数现代浏览器都原生支持 :target，然而在某些老版本或移动端环境下可能存在微小差异，应提供合适的退化策略，如在不支持的环境中保持基本的跳转功能。
/* 退化策略示例：在不支持 :target 的环境中，仍可通过传统锚点跳转实现导航 */@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}
}四、实用代码模版与示例
完整示例：HTML 与 CSS
下面给出一个完整的最小化示例，展示如何通过 CSS :target 实现锚点高亮的实战效果，并结合简单的导航提升页面可用性。
该示例包含一个导航区域和若干内容区块，哈希变化时会触发相应区域的高亮展示，且支持平滑滚动与固定头部的偏移。
CSS :target 锚点高亮示例
第一章：初始化逻辑
在本章中，我们通过 :target 实现了第一节的高亮效果，避免额外的 JavaScript 依赖。
第二章：样式与过渡
背景高亮、边框轮廓、以及平滑过渡共同构成了直观的锚点反馈。
第三章：无障碍与兼容性
为确保可访问性，我们在高亮区域同时提供文本描述和足够的对比度。
