用 :target 可实现单页导航高亮，需锚点链接与对应 id 元素匹配；高亮导航项需借助同级类名或 ~ 选择器联动；支持 IE9+，但依赖 URL 锚点且不适用于跨页跳转。
用 :target 实现当前页面导航高亮，核心是让 URL 中的锚点（如 #about）自动触发对应元素的样式变化，适合单页内跳转场景，无需 JavaScript。
前提：导航链接必须带锚点 href
确保你的导航菜单使用标准的锚点链接，指向页面内已有 id 的元素：
同时，页面中需存在对应 id 的目标区块：: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失效。
不复杂但容易忽略。
