Question

我有一个组件，当我将CSS代码添加到该组件的.css文件时，它可以工作。但是，如果我将代码移至style.css，则无法正常工作。

我的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>

我的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
}

但是，并非所有组件都无法正常工作，下面是我的文件结构。 Style.css适用于'dashboard'html，但不适用于'trans-msg-his-dialog'html。我想知道为什么与module.ts的{{1}}有关。

有人可以帮忙吗？谢谢。

文件结构：

更新按照StepUp的评论，我检查了Chrome Inspector，发现以下内容：

'dashboard'起作用：

“ trans-msg-his-dialog”不起作用：

但是，我不确定第一部分是什么，我无法在CSS中找到它们。我想知道是否与Bootstrap有关？

trans-msg

}

UPDATE2 计算样式如下所示，但是在我的任何CSS中都找不到'rgba（0，0，0，0.87）'。我还尝试将那些与A相关的CSS移到style.css的底部，但是没有运气。

Answer 1

尝试从your.component.css中删除样式，这些样式与styles.css中声明的样式重叠，并且应应用所有全局样式。或者，通过声明放置在低于所需样式的新类来覆盖styles.css中的样式。

由于CSS特殊性规则，某些全局样式未应用。 Read a great article at mdn about CSS speicifity.

尝试通过使用CSS指定规则来避免使用!important关键字。使用!important几乎从来不是一个好主意。

更新：

Chrome Developer工具显示CSS属性'trans-msg-his-dialog'被覆盖。可以通过CSS属性中的删除线来看到它。

您可以通过单击Computed style标签来查看赢得哪些属性：

或尝试将这些样式移至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>标签没有href或tabindex属性，则它将具有color: inherit和text-decoration: none;。因此，尝试将href属性添加到您的锚标记：

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

Angular的Style.css不适用于某些组件

1 个答案: