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

【问题标题】：Style.css of Angular not applying to certain ComponentAngular 的 Style.css 不适用于某些组件
【发布时间】：2019-09-06 05:52:12
【问题描述】：

我有一个组件，当我将 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。我想知道为什么，如果它与trans-msg 的module.ts 有关。

有人可以帮忙吗？谢谢。

文件结构：

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

“仪表板”有效：

'trans-msg-his-dialog' 不起作用：

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

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

}

更新2 计算样式如下所示，但是我在任何 css 中都找不到 'rgba(0, 0, 0, 0.87)'。我还尝试将那些与 a 相关的 css 移动到 style.css 的底部，但没有运气。

【问题讨论】：

如果您必须覆盖一个样式，请在单个样式的末尾添加!important。即：color: red !important;
@JacopoSciampi 谢谢，我添加了 !important 并且它确实有效！但是我想知道为什么 style.css 确实适用于一个组件而不适用于另一个组件。
在这里你可以找到答案：stackoverflow.com/questions/9245353/… -> 基本上style.css 中定义的样式在trans-msg-his-dialog.css 之后应用。 !important! 键 -says- 接受它作为值，忽略为该类或 id 定义的所有其他规则
@JacopoSciampi 我明白了。知道了，谢谢！

标签： css angular

【解决方案1】：

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

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

通过使用 CSS 特定性规则，尽量避免使用 !important 关键字。使用!important 几乎从来都不是一个好主意。

更新：

Chrome 开发者工具显示 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>

【讨论】：

感谢您的回复！但是，styles.css 和 component.css 中都没有重复声明。我的 component.css 确实声明了一组 css 代码，但是这个代码没有在 style.css 中声明。
@chloe 你能在你使用!important关键字的地方展示你的组件样式吗？
@chloe 查看!important 应用了哪些属性并从your.component.css 中删除这些样式属性
我的组件css只有一个代码“.mat-column-transKey {flex: 0 0 150px;}”，我需要的css是'a'相关的，它们只是在styles.css 中，而不是在my.component.css 中。
@chloe 这意味着您的样式被全局styles.css 中的另一种样式覆盖。尝试使用 Google Chrome Inspector 哪个样式会覆盖您的样式属性

【解决方案2】：

enter image description here

万一以后有人遇到这个问题，（链接是 angular.json 文件）。我看到有几个人说只使用!important，但!important 可能带有错误。所以，我自己解决了这个问题，并决定重新排序angular.json 文件中的样式。这使styles.css 优先于bootstrap。对我来说效果很好！旁注：另外，如果您使用的是引导程序，请意识到引导程序类已经带有一些样式，所以这可能也是您遇到问题的原因。您正在使用 styles.css，但引导类仍然具有样式。

【讨论】：