title: Style.css of Angular not applying to certain Component
body: <p>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.</p>
  
  <p><strong>My html</strong></p>
  
  <pre><code>&lt;div class="content-body mat-elevation-z8"&gt;
    &lt;mat-table [dataSource]="dataSource" matSort&gt;
      &lt;ng-container matColumnDef="transKey"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; trans no &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let row"&gt;
          &lt;a (click)="showDetail(row.url, row.transKey)" &gt;
              {{row.transKey}}
          &lt;/a&gt;
          &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>.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
  }
  </code></pre>
  
  <p>However, not all components are not working, below is my file structure. Style.css works on '<code>dashboard</code>' html, but not '<code>trans-msg-his-dialog</code>' html. I'm wondering why, if it has something to do with the <code>module.ts</code> of <code>trans-msg</code>. </p>
  
  <p>Can anyone help? Thank you.</p>
  
  <p>File structure :</p>
  
  <p><a href="https://i.stack.imgur.com/TWJ9U.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TWJ9U.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE</strong>
  Following StepUp's comment, I checked Chrome Inspector and found following:</p>
  
  <p>'dashboard' which works:</p>
  
  <p><a href="https://i.stack.imgur.com/IGcH1.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/IGcH1.jpg" alt="enter image description here"></a></p>
  
  <p>'trans-msg-his-dialog' which is not working:</p>
  
  <p><a href="https://i.stack.imgur.com/45OgA.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/45OgA.jpg" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <pre><code>a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
  </code></pre>
  
  <p>}</p>
  
  <p><strong>UPDATE2</strong>
  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.
  <a href="https://i.stack.imgur.com/myTBc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/myTBc.jpg" alt="enter image description here"></a></p>