如何在CSS中使用伪类:target实现锚点跳转高亮_结合:target改变背景和边框

:target伪类可选中URL片段对应的元素并为其添加高亮样式，如改变背景色、边框和添加阴影，结合transition实现平滑动画，提升锚点跳转的视觉反馈与用户体验。

当用户点击页面内的锚点链接跳转到指定元素时，可以通过CSS的 :target 伪类来高亮显示该元素。这个方法无需JavaScript，纯CSS即可实现视觉反馈，提升用户体验。

什么是 :target 伪类？

:target 是一个CSS伪类，用于匹配当前URL片段标识符（即#后面的ID）所指向的元素。例如，当浏览器地址为 page.html#section1 时，ID为 section1 的元素就会被 :target 选中。

如何使用 :target 高亮锚点元素

你可以结合 :target 改变目标元素的背景色、边框、内边距等样式，使其在页面中更醒目。

示例HTML结构：

步骤一：准备材料
这里是第一步的内容...

步骤二：开始制作
这里是第二步的内容...

步骤三：完成检查
这里是第三步的内容...

对应的CSS样式：

/* 默认样式 */
section {
  padding: 20px;
  margin: 10px 0;
  border: 2px solid #ddd;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}
/ 当该section成为目标时的高亮样式 /
section:target {
background-color: #ffeb3b;
border-color: #ff8f00;
box-shadow: 0 0 10px rgba(255, 143, 0, 0.4);
transform: scale(1.02);
}

实用技巧与注意事项

• 平滑滚动：配合 scroll-behavior: smooth 可让跳转更自然。
• 动画过渡：使用 transition 让背景或边框变化更柔和。
• 可访问性：高亮颜色应有足够对比度，方便视觉障碍用户识别。
• 避免干扰布局：scale或padding变化可能引起页面抖动，建议用transform或阴影代替。

扩展用法：配合其他选择器

你还可以结合其他选择器增强效果，比如只对标题应用高亮：

section:target h2 {
  background: #ff6f00;
  color: white;
  padding: 10px;
  display: inline-block;
}

基本上就这些 —— 使用 :target 实现锚点高亮简单高效，适合文档、帮助页、表单步骤等场景，不复杂但容易忽略的小技巧。