:target 不能用于“当前页面”高亮，因为它只匹配 url 片段（#id）对应的目标元素，与当前加载的 html 文件路径无关；可靠方案是手动或 js 添加 class="active"。
纯 CSS 无法自动识别“当前页面”，:target 只响应 URL 片段（#id）变化，不是路径匹配；真正可靠的高亮必须靠类名（如 active）手动或 JS 添加。
为什么 :target 不能用于“当前页面”高亮
:target 匹配的是 URL 中 # 后的 ID 对应的**目标元素本身**，比如 <section id="about"></section>，而不是导航链接。它只在用户点击 <a href="#about"></a> 或直接访问 /page.html#about 时触发，和当前加载的是哪个 HTML 文件完全无关。
- 访问
about.html页面时，URL 是/about.html，没有#，:target根本不生效 - 即使你硬写
about.html#about，也只是让<section id="about"></section>被选中，无法反向影响<a href="about.html"></a>的样式 -
a:target永远不匹配——除非你把a自己设为锚点（<a id="about"></a>），但这违背语义且不可维护
用 class="active" 手动标记是最稳方案
适用于 Replit、GitHub Pages 等静态托管环境，无 JS 依赖，无兼容性风险，样式完全可控。
- 每个页面中，只给对应导航链接加
class="nav-link active"，其余链接不加 - CSS 中定义
.nav-link.active样式，比如background-color、font-weight、color - 可额外加
aria-current="page"提升无障碍支持，不影响视觉但对屏幕阅读器友好 - 不要试图用
[href="/about"]属性选择器替代——它无法处理查询参数、末尾斜杠差异、相对路径等问题
如果必须用 JS 自动判断，注意路径匹配细节
手动维护类名在页面少时最省心；页面多或路由动态生成时，JS 是合理选择，但得避开常见坑：
- 用
window.location.pathname获取路径，不是href（含协议、域名、查询参数） - 用
new URL(link.href).pathname统一解析href，避免相对路径误判 - 用
startsWith()而非===或includes()：防止/user错误匹配/users/edit - 子目录部署（如
/my-app/）需先剥离 base path，否则所有匹配都失败
最易被忽略的一点：CSS 优先级。如果你的 .nav-link.active 样式没生效，大概率是被更宽泛的选择器（比如 nav a:hover）覆盖了——加 !important 是下策，改选择器 specificity（比如 nav .nav-link.active）才是正解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
