必须用JavaScript添加is-active类并配合Sass样式实现导航高亮，:active和:target均不可靠；需兼顾键盘操作与无障碍，统一处理:focus与.is-active状态。

导航栏点击后如何保持高亮状态

靠 CSS 本身无法感知“点击”，:active 只在鼠标按下瞬间生效，松开就消失。真要维持点击后的高亮，必须靠 JavaScript 控制 class，再用 Sass 去写对应的样式嵌套规则。

• 给当前激活的导航项加一个 is-active 类（别用 active，太容易和 Bootstrap 冲突）
• Sass 里用嵌套写：

  .nav-item {
    &.is-active {
      background: #007bff;
      color: white;
    }
  }

• 注意：如果用 router-link（Vue）或 NavLink（React Router），它们自带 activeClassName 或 className 函数，别重复手写逻辑

Sass 嵌套里怎么避免过度选择器层级

导航栏结构常是 <nav><ul><li><a></a></li></ul></nav>，Sass 一层层嵌套容易写出 nav ul li a.is-active 这种 4 层选择器——既难维护，又可能被其他样式意外覆盖。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 推荐扁平化命名，比如 .nav-link 和 .nav-link.is-active，直接作用于 <a></a> 元素
• 用 @at-root 跳出嵌套：

  .nav {
    &__link {
      color: #333;
      @at-root .nav-link.is-active {
        color: #007bff;
        font-weight: 600;
      }
    }
  }

• 层级超过 3 层时，浏览器渲染开销会上升，尤其在低端 Android 设备上可见卡顿

点击响应需要考虑键盘和屏幕阅读器

只监听 click 事件会漏掉空格键、回车键触发，也对无障碍不友好。CSS 层面虽不能解决交互逻辑，但样式必须配合语义化 HTML 才能生效。

• 导航项必须是 <a href="..."></a> 或带 role="link" + tabindex="0" 的元素
• :focus 样式不能被 outline: none 粗暴清除；可用 outline: 2px solid #007bff 配合 outline-offset: 2px 优化视觉
• Sass 中可统一处理：

  .nav-link {
    &:focus,
    &.is-active {
      outline: 2px solid #007bff;
    }
  }

为什么不用 :target 搞导航高亮

有人试过用 URL 锚点 + :target 实现无 JS 高亮，比如 #home 对应 <div id="home">。这方法在导航栏上基本不可行。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li> <code>:target 匹配的是页面内 id，不是导航项自身，你得把每个 <a></a> 的 href 指向一个真实存在的 id，而多数导航跳转是路由或页面刷新

单页应用中，URL 改变不会触发 :target 重算（History API 不影响锚点状态）

即使强行用，样式优先级也容易被嵌套规则压垮，调试时你会看到 .nav-link:target 完全不生效——因为根本没匹配到

实际项目里最易被忽略的，是点击态和焦点态的样式共存逻辑。比如用户用键盘 tab 到某个导航项，再按回车，这时既要 :focus，又要 .is-active，两个 class 得同时存在且不互相覆盖。Sass 里别写成互斥的 &:focus { ... } 和 &.is-active { ... }，而要合并处理。