使用 :target 可实现纯 CSS 单页导航高亮，通过 URL 片段激活目标元素样式。1. 导航链接指向带 ID 的内容区；2. 利用 section:target 高亮当前内容；3. 因 CSS 无法反向选中导航，需调整结构，如将 .nav-link 置于目标区域内；4. 通过 .nav-link:target 或 div:target .nav-link 规则高亮对应导航项。适合静态页面，依赖合理 HTML 结构。
使用 :target 实现单页导航高亮，是一种纯 CSS 的方法，适合简单的页面锚点跳转场景。当 URL 中的片段标识符（即 # 后面的部分）指向页面中的某个元素时，该元素就成为“目标元素”，可以通过 :target 选择器为其添加样式，比如高亮对应的导航项。
1. 基本结构：HTML 锚点与目标元素
确保每个导航链接指向页面中的一个唯一 ID，这些元素就是可能被激活的目标。
<nav> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#contact">联系</a> </nav> <p><section id="home"><h2>首页内容</h2></section> <section id="about"><h2>关于内容</h2></section> <section id="contact"><h2>联系内容</h2></section></p>
2. 使用 :target 高亮目标区域
你可以为当前显示的内容区域添加背景或边框，表示它是当前选中项。
section:target {
background-color: #f0f8ff;
border-left: 4px solid #007acc;
padding: 20px;
}
3. 实现导航项高亮
由于 CSS 无法反向选择父级或兄弟之前的元素（除非结构允许），你需要调整 HTML 结构来让导航项能响应目标状态。一种常见方式是把导航和内容放在一起，利用相邻或兄弟选择器。
立即学习“前端免费学习笔记（深入）”；
示例：将导航放在对应内容内部，并默认隐藏，仅在目标激活时显示高亮状态。
更实用的方式是结合伪类与结构设计：
/* 默认样式 */
nav a {
color: #333;
text-decoration: none;
}
<p>/<em> 当点击 #about，且有一个 a[href="#about"] 存在时，怎么高亮它？ </em>/
/<em> 我们可以反过来：通过目标元素影响其“关联”的导航 —— 但需借助额外结构 </em>/</p>如果结构不能改变，:target 无法直接选中导航链接。这时可以采用以下技巧：
4. 替代方案：用 label 模拟导航（进阶技巧）
使用隐藏 radio 或 checkbox + label 配合 :target 复杂但可控。不过对于简单需求，推荐 JavaScript 辅助，或者接受只能高亮内容区的事实。
若坚持纯 CSS 且想高亮菜单文字，可考虑如下结构：
<div id="home"> <a href="#home" class="nav-link">首页</a> <section>这里是首页内容...</section> </div> <p><div id="about"> <a href="#about" class="nav-link">关于</a> <section>关于内容...</section> </div></p>
.nav-link {
display: block;
margin: 10px;
color: #000;
text-decoration: none;
}
<p>/<em> 当前目标页的链接高亮 </em>/
.nav-link:target,
div:target .nav-link {
color: red;
font-weight: bold;
}</p>这样，当用户点击导航进入某区块时，该区块成为目标，其内部的 .nav-link 就会被高亮。
基本上就这些。虽然 :target 功能有限，但在轻量级项目中足够实用，尤其适合无 JS 的静态页面。关键是合理安排 HTML 结构，让 CSS 能够“触及”到需要高亮的元素。
