:target伪类可选中url片段对应的元素并为其添加高亮样式，如改变背景色、边框和添加阴影，结合transition实现平滑动画，提升锚点跳转的视觉反馈与用户体验。
当用户点击页面内的锚点链接跳转到指定元素时，可以通过CSS的 :target 伪类来高亮显示该元素。这个方法无需JavaScript，纯CSS即可实现视觉反馈，提升用户体验。
什么是 :target 伪类？
:target 是一个CSS伪类，用于匹配当前URL片段标识符（即#后面的ID）所指向的元素。例如，当浏览器地址为 page.html#section1 时，ID为 section1 的元素就会被 :target 选中。
如何使用 :target 高亮锚点元素
你可以结合 :target 改变目标元素的背景色、边框、内边距等样式，使其在页面中更醒目。
立即学习“前端免费学习笔记（深入）”；
示例HTML结构：
<nav> <a href="#step1">步骤一</a> <a href="#step2">步骤二</a> <a href="#step3">步骤三</a> </nav> <p><section id="step1"> <h2>步骤一：准备材料</h2> <p>这里是第一步的内容...</p> </section></p><p><section id="step2"> <h2>步骤二：开始制作</h2> <p>这里是第二步的内容...</p> </section></p><p><section id="step3"> <h2>步骤三：完成检查</h2> <p>这里是第三步的内容...</p> </section></p>
对应的CSS样式：
/* 默认样式 */
section {
padding: 20px;
margin: 10px 0;
border: 2px solid #ddd;
background-color: #f9f9f9;
transition: all 0.3s ease;
}
<p>/<em> 当该section成为目标时的高亮样式 </em>/
section:target {
background-color: #ffeb3b;
border-color: #ff8f00;
box-shadow: 0 0 10px rgba(255, 143, 0, 0.4);
transform: scale(1.02);
}</p>实用技巧与注意事项
-
平滑滚动：配合
scroll-behavior: smooth可让跳转更自然。 -
动画过渡：使用
transition让背景或边框变化更柔和。 - 可访问性：高亮颜色应有足够对比度，方便视觉障碍用户识别。
- 避免干扰布局：scale或padding变化可能引起页面抖动，建议用transform或阴影代替。
扩展用法：配合其他选择器
你还可以结合其他选择器增强效果，比如只对标题应用高亮：
section:target h2 {
background: #ff6f00;
color: white;
padding: 10px;
display: inline-block;
}
基本上就这些 —— 使用 :target 实现锚点高亮简单高效，适合文档、帮助页、表单步骤等场景，不复杂但容易忽略的小技巧。
