如何用CSS默认高亮Pill导航组件，直至其他组件被点击？

你用:focus只能实现点击后的高亮，但页面加载时元素不会自动获得焦点，所以没法默认高亮。结合Angular的路由机制，用routerLinkActive指令是最靠谱的解决方式：

步骤1：修改HTML结构 #

给<a>标签添加routerLinkActive属性指定激活类（比如active），同时开启精确匹配确保路由完全匹配时才激活：

<div class="pill-nav">
  <a routerLink='dcp' routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    Programs
  </a>
  <!-- 其他标签页的a标签也按此方式添加routerLinkActive -->
</div>

步骤2：更新CSS样式 #

把原来的:focus样式替换为.active类，也可以保留:focus样式增强点击交互：

/* 默认激活样式 */
.pill-nav a.active {
    background-color: black;
}

/* 保留点击聚焦时的样式（可选） */
.pill-nav a:focus {
    background-color: black;
}

方案说明 #

routerLinkActive是Angular官方提供的指令，会自动检测当前路由是否匹配routerLink指定的路径：匹配时给元素加上指定的active类，页面加载时若当前路由是/dcp，这个类会自动生效实现默认高亮；切换到其他路由时，该类会自动移除并给对应路由的标签页加上active类，完全满足你的需求。

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