路由器链接活动类如果该组件已经存在一个类，则不适用

Question

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

<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专用性问题。

你可能想看看这两篇文章，它们很好地解释了这个主题：

• CSS特性说明
• CSS特殊性：你应该知道的事情

在这种情况下，.example-container button比.selector更显式，因为第一个选择器有一个类和一个元素(0011(，而第二个选择器只有一个类(0010(。

一个解决方案是使第二个选择器更加具体：

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

其具有2个类和一个元素。