Angular 全局 css 文件 css 不適用於其他組件

Question

我正在使用 Angular v10，我有一些 CSS 用於整個應用程序，所以我已經在我們的全局 style.css 文件中編寫了它，但是如果我在組件中編寫相同的 CSS，那么 CSS 不適用於其他組件相關的 CSS 它工作正常。 在搜索時，我在組件中聲明了 ViewEncapsulation.None，它適用於一個組件，但仍然無法申請其他組件。 以下是我的 angular.json 文件

angular.json

我從來沒有在任何 angular 項目中遇到過這個問題，是新版本的 Angular 有問題還是我做錯了什么？

任何幫助深表感謝！

Answer 1

這可能是因為 CSS 的特殊性。

簡單地說：不同的選擇器具有不同的特異性。 例如：

如果您在全局樣式表中聲明了以下類：

.some-class {
  color: red;
}

在一個組件中，您有以下內容：

button.some-class {
  color: blue;
}

然后屬性顏色被“藍色”覆蓋，因為組件中 CSS 選擇器的特性高於全局樣式表中的特性。

解釋

要計算 CSS 選擇器的特殊性，您可以從 0 開始並添加：

• 1000（用於內聯樣式屬性）
• 100（每個ID）
• 10 個（對於每個類、屬性、偽類）
• 1（對於每個 HTML 元素）

一些例子：

button.class-1.class-2的特異性為 1（1 個 html 元素）+ 20（2 個類）= 21

#myId.class-1的特異性為 100 (1 ID) + 10 (1 class) = 110

所以后一個選擇器會覆蓋所有也在第一個選擇器中聲明的 CSS 屬性。

有關完整說明，請查看w3schools上的相應站點。