2

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

<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 等中应用该条件等

但是我开始看到如果我删除默认样式它会起作用的特殊行为......！！！

我不知道原因，但如果我删除默认按钮样式，它会起作用。

所以任何人都可以帮助我弄清楚这个解决方案到底需要什么，因为我搜索了类似的帖子，但没有一个对我有用..!!

4

1 回答 1

2

这似乎是一个 CSS 特异性问题。

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

在这种情况下，比第一个选择器有一个类和一个元素（0011），而第二个选择器只有一个类（0010）.example-container button更明确。.selector

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

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

它有 2 个类和一个元素。

于 2020-07-23T10:35:17.840 回答