Angular CSS 優(yōu)先級(jí) 在 Angular 中，樣式是由組件內(nèi)部的 CSS 和應(yīng)用級(jí)的全局樣式所組成。當(dāng)在不同的樣式文件中修改相同的 CSS，就會(huì)遇到 CSS 優(yōu)先級(jí)的問(wèn)題。如何解決這個(gè)問(wèn)題呢？讓我們來(lái)看看 Angular 中 CSS 的優(yōu)先級(jí)規(guī)則。 在 Angular 中，當(dāng) CSS 規(guī)則有多個(gè)來(lái)源時(shí)，優(yōu)先級(jí)規(guī)則如下： 1. !important 使用 !important 在樣式規(guī)則上方添加即可。 例如： ``` css p { color: red !important; } ``` 2. 主題樣式（theme）和子主題樣式（sub-theme） 使用 Angular Material 的主題和子主題是一種簡(jiǎn)單的應(yīng)用級(jí)全局樣式。當(dāng)應(yīng)用級(jí)樣式與組件內(nèi)部 CSS 的規(guī)則沖突時(shí)，主題和子主題樣式會(huì)優(yōu)先于組件內(nèi)部的樣式。 例如： 在全局樣式中： ``` 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; } ``` 此時(shí)，按鈕的背景色將會(huì)是藍(lán)色，因?yàn)橹黝}樣式的優(yōu)先級(jí)高于組件樣式。 3. 組件級(jí)內(nèi)嵌樣式 組件級(jí)內(nèi)嵌樣式優(yōu)先于全局樣式。 例如： ``` html``` 按鈕的背景色將會(huì)是紅色，因?yàn)榻M件內(nèi)部的樣式規(guī)則優(yōu)先于全局樣式。 4. 組件級(jí)樣式表 應(yīng)該按照 HTML 元素的選擇器權(quán)重規(guī)則處理組件級(jí)樣式表。 例如： ``` css button { background-color: red; font-size: 16px; } button.secondary { background-color: blue; } ``` 在標(biāo)準(zhǔn)情況下， button.secondary 的背景色應(yīng)該是藍(lán)色，并且字體大小是 16 像素。 總結(jié) 在 Angular 中，CSS 的優(yōu)先級(jí)還是按照傳統(tǒng)的 CSS 優(yōu)先級(jí)規(guī)則來(lái)處理的，如果遇到優(yōu)先級(jí)沖突的情況，就需要使用以上四種規(guī)則來(lái)處理樣式。記住，應(yīng)該按照選擇器的優(yōu)先級(jí)來(lái)規(guī)劃 CSS。