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

Try to remove styles from the your.component.css which overlapps in styles declared in styles.css and all global styles should be applied. Or you override your styles in styles.css by declaring new classes which are placed lower than your desired styles.

Some your global styles are not applied because of CSS specifity rule. Read a great article at mdn about CSS speicifity.

Try to avoid using !important keyword by using CSS specifity rules. It's almost never a good idea to use !important.

UPDATE:

Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.

1. You can see which properties won by clicking Computed style tab:

2. Or try to move these styles to the bottom of style.css file:

   .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
   }
   

UPDATE 1:

Now we know that Bootstrap style has too strong selectors and overrides your anchor:

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

We see that if <a> tag does not have href or tabindex attributes, then it will have color: inherit and text-decoration: none;. So try to add href attribute to your anchor tag:

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