:target 不能直接高亮导航项，因其仅匹配 url 片段对应的真实 id 元素，而非导航链接本身；需配合兄弟选择器（结构受限）或 javascript 监听 hashchange 动态添加 active 类来实现可靠高亮。
为什么 :target 不能直接用于导航栏当前项高亮
因为 :target 只匹配 URL 中 # 后的片段（fragment）所指向的**真实 DOM 元素 ID**，而导航栏的 <a></a> 标签本身通常不带对应 ID，也不会自动“变成”目标元素。你点击 <a href="#about"></a>，浏览器滚动到 id="about" 的那个 section，:target 作用在那个 section 上，不是作用在导航链接上。
所以想靠纯 CSS 让「导航项」自己高亮，:target 单独用是无效的——它选不到导航项，只选得到目标内容块。
用 :target 配合兄弟选择器实现间接高亮（需 HTML 结构配合）
前提是导航栏和目标区块在 DOM 中有稳定的位置关系，比如导航栏是 <nav></nav>，所有目标区块（<section id="home"></section> 等）紧随其后且同级。这时可以利用 :target + ~（后续兄弟选择器）定位到对应导航项。
示例结构：
<nav><a href="#home">首页</a> <a href="#about">关于</a> </nav><section id="home"></section><section id="about"></section>
对应 CSS：
section:target ~ nav a[href="#home"] { color: red; }
section:target ~ nav a[href="#about"] { color: red; }
但这个写法有明显限制：
- 必须保证
section在nav之后，否则~无法向上选 - 每个规则要手写一遍，ID 多了维护成本高
- URL 手动改成
#home时能生效，但页面加载后默认没 target，不会高亮“首页”
更可靠的做法：用 JavaScript 监听 hashchange 并切换 class
这是实际项目中最常用、最可控的方式。它不依赖 DOM 顺序，支持默认高亮，也兼容前进/后退。
核心逻辑：
- 解析
window.location.hash（如#about→ 得到about） - 找到导航中
href="#about"的<a></a>，加active类 - 移除其他导航项的
active类 - 监听
hashchange事件，响应地址栏变化
简短示例：
function updateNavActive() {
const hash = window.location.hash.slice(1);
document.querySelectorAll('nav a').forEach(a => {
a.classList.toggle('active', a.getAttribute('href') === `#${hash}`);
});
}
window.addEventListener('hashchange', updateNavActive);
updateNavActive(); // 页面加载时也执行一次
对应 CSS 只需写一条：
nav a.active { color: #007bff; font-weight: bold; }
注意 URL 初始状态和空 hash 的处理
用户首次访问 https://site.com/ 时，window.location.hash 是空字符串，但你想让「首页」高亮，就得约定一个默认值（比如 home 或空字符串对应首页）。
常见做法：
- 给首页链接设
href=""或href="#"，然后在 JS 中把空 hash 当作home - 或者统一用
href="#home"，并在页面加载时若 hash 为空，则history.replaceState(null, '', '#home')补上 - 不要忽略
hashchange事件在 iOS Safari 中可能触发两次的问题，可用节流或标记位过滤重复调用
真正麻烦的从来不是怎么高亮，而是怎么让「当前项」的定义在 URL、DOM、JS 状态三者之间始终一致——尤其当导航还混着 JS 跳转、后退按钮、分享链接时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
