Style.css of Angular not applying to certain Component

Question

I have a component, when I add the css code to the .css file of that component, it works. But if I move the code to style.css, it's not working.

My html

<div class="content-body mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="transKey">
      <mat-header-cell *matHeaderCellDef mat-sort-header> trans no </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <a (click)="showDetail(row.url, row.transKey)" >
            {{row.transKey}}
        </a>
        </mat-cell>
    </ng-container>
  </mat-table>
</div>

My CSS

.content-body a {
  cursor: pointer;
  text-decoration: none;
  color:  #4c90c7
}

.content-body a:hover {
  color: #346092;
}

.content-body a:visited {
  text-decoration: none;
  color: #4c90c7
}

However, not all components are not working, below is my file structure. Style.css works on 'dashboard' html, but not 'trans-msg-his-dialog' html. I'm wondering why, if it has something to do with the module.ts of trans-msg.

Can anyone help? Thank you.

File structure :

UPDATE Following StepUp's comment, I checked Chrome Inspector and found following:

'dashboard' which works:

'trans-msg-his-dialog' which is not working:

However, I'm not sure what the first section is, I can't find them in my css. I'm wondering if it has something to do with Bootstrap?

a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;

}

UPDATE2 Computed style is like following, however I can't find 'rgba(0, 0, 0, 0.87)' in any of my css. I also tried to move those a-related css to the bottome of style.css, but no luck.

Answer 1

尝试从your.component.css其中声明的样式中的重叠中删除样式，styles.css并且应应用所有全局样式。或者你styles.css通过声明比你想要的样式低的新类来覆盖你的样式。

由于 CSS 特定规则，您的某些全局样式未应用。 在 mdn 上阅读一篇关于 CSS 特殊性的精彩文章。

!important通过使用 CSS 特定规则，尽量避免使用关键字。使用!important.

更新：

Chrome 开发人员工具显示 CSS 属性“trans-msg-his-dialog”被覆盖。它可以通过 CSS 属性中的删除线看到。

1. 您可以通过单击Computed style选项卡查看哪些属性获胜：

2. 或者尝试将这些样式移动到style.css文件底部：

   .content-body a {
       cursor: pointer;
       text-decoration: none;
       color:  #4c90c7
   }
   
   .content-body a:hover {
       color: #346092;
   }
   
   .content-body a:visited {
       text-decoration: none;
       color: #4c90c7
   }
   

更新1：

现在我们知道 Bootstrap 样式具有太强的选择器并覆盖了您的锚点：

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

我们看到如果<a>标签没有hrefortabindex属性，那么它将有color: inheritand text-decoration: none;。因此，尝试将href属性添加到您的锚标记：

<a href="javascript:;">Button</a>