直接用:target伪类可响应url fragment变化并高亮菜单项，前提是菜单标签必须设置与hash值完全一致的id（如#home对应id="home"），且区分大小写、不支持查询参数；若需高亮菜单自身而非内容区，应将id置于元素上，并配合a:target{}样式。
URL锚点变化时如何自动高亮菜单项
直接用 :target 伪类就能响应 URL 中的 fragment（即 #xxx 部分），但前提是菜单项的 id 必须和 fragment 值完全一致。它不处理查询参数（?tab=home），只认 #home 这种写法。
常见错误是把菜单 a 的 href 写成 ?tab=home，结果 :target 完全不触发——因为没生成任何可匹配的元素目标。
- ✅ 正确做法：菜单链接指向
#dashboard，对应页面中存在<div id="dashboard"></div> - ❌ 错误写法：
href="?page=about"或href="/about#top"（后者虽带#，但目标元素不存在或 ID 不匹配） - ⚠️ 注意大小写和特殊字符：
#user-profile只能匹配id="user-profile"，不能匹配id="user_profile"
如何让 :target 高亮的是菜单本身而非内容区块
:target 默认作用于被跳转到的元素（比如 <section id="contact"></section>），但你通常想高亮的是导航里的 <a></a> 标签。CSS 无法向上选择父级或兄弟元素，所以得换结构：
把 id 放在菜单 <a></a> 上，而不是内容区；同时用 href="#home" 指向自己。
<a href="#home" id="home">首页</a> <a href="#about" id="about">关于</a>
再配 CSS：
a:target {
background-color: #007bff;
color: white;
}
- 这样点击后 URL 变为
example.com/#about，<a id="about"></a>自动成为 :target 元素 - 缺点：页面不会滚动到某块内容（因为目标是菜单自身），如需滚动，得额外加空锚点或 JS 补位
- 若必须保留内容区 ID，就只能用 JS 监听
hashchange事件来手动加 class
:target 在单页应用（SPA）里为什么失效
Vue/React 等框架默认用 History 模式（/user/123）或 Hash 模式（/#user/123），但它们的 hash 路由往往带斜杠路径，比如 #/settings/profile —— 这时 :target 会尝试匹配 id="/settings/profile"，而你的菜单 ID 几乎不可能含斜杠或开头的 /。
- ✅ 可行方案：统一用简单 ID，如
#settings，并在路由配置中映射/settings/profile → #settings - ❌ 不要指望
:target解析路径层级；它只做字符串精确匹配 - 兼容性提醒：IE8+ 支持
:target，但旧版 Safari 对动态插入的 target 元素响应有延迟
替代方案：不用 :target 怎么响应查询参数
如果 URL 是 ?tab=projects 这种查询参数形式，:target 完全无能为力。必须用 JS 读取 location.search 并手动设 class：
const url = new URL(window.location);
const tab = url.searchParams.get('tab');
if (tab) {
document.querySelector(`a[data-tab="${tab}"]`)?.classList.add('active');
}
对应 HTML：
<a href="?tab=projects" data-tab="projects">项目</a>
- 注意：纯 CSS 无法访问 query string，这是浏览器限制
- 服务端渲染时可提前注入 class，但客户端跳转后仍需 JS 同步状态
- 若同时支持 hash 和 query 两种模式，建议统一降级到 JS 控制，避免逻辑分裂
真正容易被忽略的是：:target 匹配的是当前 URL 的 fragment，不是历史记录里的旧值；用户按浏览器后退键时，它会实时响应，但不会触发重绘以外的副作用——比如它不会重新加载数据、也不会调用 JS 回调。需要联动行为时，终究绕不开 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
