解决RouterLinkActive激活时导航链接颜色不生效问题

问题根源 #

1. RouterLinkActive使用冗余：同时在<li>和<a>标签上添加了routerLinkActive，导致active类可能被错误添加到<li>而非目标<a>标签，样式无法作用到链接文本。
2. CSS优先级冲突：ul.nav > li > a的选择器优先级高于单独的.active，所以.active的颜色设置被默认的black覆盖；同时li:hover a的规则会在hover时覆盖active状态的颜色。

修改步骤及代码 #

1. 清理HTML中的冗余配置

移除<li>标签上的[routerLinkActive]="'active'"，只保留<a>标签上的routerLinkActive="active"，确保active类只添加到链接元素：

<ul class="nav" style="font-family: 'Roboto', sans-serif;">
  <li style="display: inline;"><a [routerLink]="['home']" routerLinkActive="active">HOME</a></li>
  <li style="display: inline;"><a routerLink="/blog">BLOG</a></li>
  <li style="display: inline;"><a routerLink="/contact-us">CONTACT US</a></li>
  <li style="display: inline;"><a routerLink="/login">LOGIN</a></li>
</ul>

2. 调整CSS选择器优先级

修改CSS规则，确保active状态的样式优先级更高，同时覆盖hover状态的干扰：

div { text-align: center; }

/* Navi-bar */
ul {
  list-style-type: none;
  padding: 14px 28px;
  margin: 0;
  text-align: right;
}

ul.nav {
  padding-left: 0px;
  background-color: white;
  text-align: center;
}

ul.nav > li {
  display: inline-block;
  padding: 10px 20px;
}

ul.nav > li:hover > a {
  color: red;
}

ul.nav > li > a {
  color: black;
  text-decoration: none;
}

/* 提高active样式优先级，确保覆盖默认颜色 */
ul.nav > li > a.active {
  color: #C32F4B;
}

/* 强制active链接在hover时保持指定颜色 */
ul.nav > li:hover > a.active {
  color: #C32F4B;
}

关键说明 #

• 移除<li>上的routerLinkActive后，active类会正确绑定到<a>标签，样式直接作用于链接文本。
• 使用ul.nav > li > a.active选择器，其优先级高于ul.nav > li > a，所以激活状态的颜色#C32F4B会生效。
• 新增ul.nav > li:hover > a.active规则，专门处理激活链接的hover状态，避免被通用的li:hover a规则覆盖颜色。
• 原代码中nav a相关规则与当前导航样式冲突，已移除，避免干扰链接的样式表现。

内容的提问来源于stack exchange，提问作者randomcoder66785