首页 > 文章 > 前端

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

时间：2025-12-30 13:46:21 174浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS实现当前页面导航高亮：利用:target选择器匹配锚点状态》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

用 :target 可实现单页导航高亮，需锚点链接与对应 id 元素匹配；高亮导航项需借助同级类名或 ~ 选择器联动；支持 IE9+，但依赖 URL 锚点且不适用于跨页跳转。

css当前页面导航高亮怎么实现_利用:target选择器匹配锚点状态

用 :target 实现当前页面导航高亮，核心是让 URL 中的锚点（如 #about）自动触发对应元素的样式变化，适合单页内跳转场景，无需 JavaScript。

确保你的导航菜单使用标准的锚点链接，指向页面内已有 id 的元素：

同时，页面中需存在对应 id 的目标区块：

...。只有两者匹配，:target 才能生效。

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

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

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

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

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

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

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

不复杂但容易忽略。

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