angular - 如果该组件已经存在一个类，则 routerLinkActive 类不适用

Question

我遇到了一个有线问题，我有一个 Angular Material 侧边栏，我有用于路由应用程序的按钮，让我把代码放在下面

<div fxLayoutAlign="start stretch">
      <button routerLinkActive="selected"  [routerLinkActiveOptions]="{exact:true}" (click)="btnclick('faculty')" mat-flat-button routerLink="/mainview/faculty">
        {{'sidebar.faculty' | translate}}
      </button>
    </div>

所以我在css文件中使用具有应用默认样式的按钮，如下所示

.example-container button{
    color: #DCDCDC;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-style: normal;
    font-weight: lighter;
  }

下面是当 routerLink 处于事件状态时我想应用的样式

.selected{
    color: white;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-weight: 500;
  }

但选定的样式没有得到应用我尝试了各种技巧来应用它，但无法像
使用 routerLinkActive #rla="routerLinkActive"并在 ngclass 等中应用该条件
但是我开始看到如果我删除默认样式它会起作用的特殊行为......!!!
我不知道原因，但如果我删除默认按钮样式，它会起作用。
因此，当我搜索类似的帖子时，任何人都可以帮助我弄清楚这个解决方案到底需要什么，但没有一个对我有用..!!

Answer 1

这似乎是一个 CSS 特异性问题。
您可能想看看这 2 篇文章，它们很好地解释了这个主题:

Specifics on CSS Specificity

CSS Specificity: Things You Should Know

在这种情况下， .example-container button比 .selector 更明确因为第一个选择器有一个类和一个元素(0011)，而第二个选择器只有一个类(0010)。
一个解决方案是使第二个选择器更具体:

.example-container button.selected { ... }

它有 2 个类和一个元素。