Angular CSS 优先级
在 Angular 中，样式是由组件内部的 CSS 和应用级的全局样式所组成。当在不同的样式文件中修改相同的 CSS，就会遇到 CSS 优先级的问题。如何解决这个问题呢？让我们来看看 Angular 中 CSS 的优先级规则。
在 Angular 中，当 CSS 规则有多个来源时，优先级规则如下：
1. !important
使用 !important 在样式规则上方添加即可。
例如：
``` css
p {
color: red !important;
}
```
2. 主题样式（theme）和子主题样式（sub-theme）
使用 Angular Material 的主题和子主题是一种简单的应用级全局样式。当应用级样式与组件内部 CSS 的规则冲突时，主题和子主题样式会优先于组件内部的样式。
例如：
在全局样式中：
``` css
@import '~@angular/material/theming';
@include mat-core();
$my-theme: (
primary: mat-palette($mat-blue),
);
@include angular-material-theme($my-theme);
```
在组件样式中：
``` css
button {
background-color: red;
}
```
此时，按钮的背景色将会是蓝色，因为主题样式的优先级高于组件样式。
3. 组件级内嵌样式
组件级内嵌样式优先于全局样式。
例如：
``` html