CSS:target实现单页导航高亮方法

一分耕耘，一分收获！既然打开了这篇文章《CSS :target 实现单页导航高亮效果》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

:target 是匹配 URL 中 fragment identifier 所指向 id 元素的 CSS 伪类，纯 CSS 实现、大小写敏感、仅作用于首个同 id 元素，需配合 scroll-margin-top 避免头部遮挡且注意 SPA 中 hash 模式兼容性。

什么是 :target 伪类

:target 是 CSS 原生支持的伪类，它匹配 URL 中 fragment identifier（即 # 后面的部分）所指向的元素。比如访问 page.html#section2，浏览器会自动滚动到 id="section2" 的元素，并让该元素成为 :target。

它不依赖 JS，纯 CSS 可用，但注意：只有当前 URL 的 hash 精确匹配元素 id（不是 class 或其他属性）时才生效。

如何用 :target 高亮锚点元素

直接给 :target 添加样式即可，常见做法是加背景、边框或阴影：

section:target {
  background-color: #f0f8ff;
  padding: 2px 0;
  border-left: 4px solid #4a90e2;
}

注意点：

• :target 匹配的是整个元素，不是其子内容，所以样式作用在容器上
• 若多个元素有相同 id（非法但偶发），只有第一个被选中
• 页面加载时若带 hash，:target 会立即生效；后续点击链接也会实时触发/取消
• 不能用 :target:hover 这类组合——:target 本身已是状态，不响应悬停

单页导航中配合 使用的细节

• 链接的 href 必须为 #xxx，且目标元素必须有对应 id="xxx"（大小写敏感）
• name 属性已废弃，不要用 替代 id
• 若目标是

  ，链接写 FAQ 即可

• 滚动后可能被固定头部遮挡，需配合 scroll-margin-top（如 section { scroll-margin-top: 60px; }）微调定位

兼容性与容易忽略的问题

:target 在所有现代浏览器中都支持（包括 IE9+），但有两个隐蔽坑：

• SPA 框架（如 Vue Router、React Router）默认用 History 模式，不触发 :target；需显式启用 hash 模式或手动监听 hashchange 并添加 class 模拟
• 页面内通过 JS 修改 location.hash 会触发 :target，但若目标元素尚未渲染（如懒加载区块），样式不会应用——得等元素挂载后再设 hash
• :target 不会“记住”状态，刷新页面后依然有效，但若服务端对 hash 做了重定向或拦截（如某些静态托管平台），可能导致 hash 被丢弃

最常被跳过的其实是 scroll margin 和 id 唯一性验证——这两个不处理好，高亮看起来就“偶尔失灵”。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。