CSS实现导航高亮：:target匹配锚点状态

基础高亮样式写法

直接对目标元素本身加样式即可，例如：

#home:target,
#services:target,
#contact:target {
  background-color: #f0f8ff;
  padding: 2rem 0;
  scroll-margin-top: 60px; /* 避免被固定头部遮挡 */
}

但这样高亮的是内容区，不是导航项本身。若想高亮「导航链接」，需要借助父容器或相邻兄弟结构（CSS 无法向上选中父级），所以更推荐下面这种方案。

高亮对应导航项的实用技巧

由于 :target 作用于目标元素，而导航链接是它的“触发者”，CSS 本身不能反向选择。常用解法是：把导航链接和目标区块放在同一层级，并用相邻/子元素关系绑定。

• 给每个导航项添加唯一 class，如 nav-link-home；
• 给对应目标区块也添加相同 class，如 section-home；
• 利用通用兄弟选择器或布局结构联动样式：

.section-home:target ~ .nav-menu .nav-link-home,
.section-services:target ~ .nav-menu .nav-link-services {
  color: #007bff;
  font-weight: bold;
}

或者更简洁的做法：把导航菜单放在目标区块之后，用 ~ 选择器匹配后续同级元素中的对应链接。

注意边界与兼容性

:target 在所有现代浏览器中支持良好（IE9+），但有几点容易踩坑：

• URL 必须含锚点，如 page.html#services —— 直接访问无锚点时不会触发；
• 页面加载后手动修改 URL 锚点（如地址栏编辑回车），会实时触发 :target；
• 不适用于跨页面跳转后的高亮（因为新页面中锚点未激活旧导航），此时需配合 JS 或服务端逻辑；
• 慎用在动态渲染内容上，若目标元素是 JS 插入且无 id 或 id 不匹配，:target 失效。

不复杂但容易忽略。

理论要掌握，实操不能落！以上关于《CSS实现导航高亮：:target匹配锚点状态》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！