17370845950

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

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

前提：导航链接必须带锚点 href

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

• 首页
• 服务
• 联系

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

基础高亮样式写法

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

#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 失效。

不复杂但容易忽略。