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
上一篇eval方法轉化json
下一篇mysql修改表 字符集