CSS 特異性

什么是特異性？

如果有兩條或兩條以上指向同一元素的沖突 CSS 規則，則瀏覽器將遵循一些原則來確定哪一條是最具體的，并因此勝出。

將特異性（specificity）視為得分/等級，能夠確定最終將哪些樣式聲明應用于元素。

通用選擇器（*）具有較低的特異性，而 ID 選擇器具有較高的特異性！

注意：這種特異性是 CSS 規則不適用于某些元素的常見原因，盡管您可能會認為應該適用。

特異性層次

每個選擇器在特異性層次結構中都有其位置。以下四種類別定義了選擇器的特異性級別：

行內樣式 - 行內（內聯）樣式直接附加到要設置樣式的元素。實例：<h1 style="color: #ffffff;">。

ID - ID 是頁面元素的唯一標識符，例如 #navbar。

類、屬性和偽類 - 此類別包括 .classes、[attributes] 和偽類，例如：:hover、:focus 等。

元素和偽元素 - 此類別包括元素名稱和偽元素，比如 h1、div、:before 和 :after。

如何計算特異性？

請您牢記計算特異性的方法！

從 0 開始，為 style 屬性添加 1000，為每個 ID 添加 100，為每個屬性、類或偽類添加 10，為每個元素名稱或偽元素添加 1。

請思考以下三個代碼片段：

實例

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A 的特異性為 1（一個元素）
  • B 的特異性為 101（一個 ID 引用以及一個元素）
  • C 的特異性為 1000（行內樣式）

由于 1 < 101 < 1000，因此第三條規則（C）具有更高的特異性，所以將被應用。

特異性規則 1：

在特異性相同的情況下：最新的規則很重要 - 如果將同一規則兩次寫入外部樣式表，那么樣式表中后面的規將更靠近要設置樣式的元素，因此會被應用：

實例

h1 {background-color: yellow;}
h1 {background-color: red;}

親自試一試

后一條規則始終適用。

特異性規則 2：

ID 選擇器比屬性選擇器擁有更高的特異性 - 請看以下三行代碼：

實例

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

親自試一試

第一條規則比其他兩條更具體，因此將被應用。

特異性規則 3：

上下文選擇器比單一元素選擇器更具體 - 嵌入式樣式表更靠近要設置樣式的元素。所以在以下情況下：

實例

來自外部 CSS 文件：

#content h1 {background-color: red;}

在 HTML 文件中：

<style>
#content h1 {
  background-color: yellow;
}
</style>

將適用后一條規則。

特異性規則 4：

類選擇器會擊敗任意數量的元素選擇器 - 類選擇器（諸如 .intro 會擊敗 h1、p、div 等）：

實例

.intro {background-color: yellow;}
h1 {background-color: red;}

親自試一試

此外，通用選擇器以及被繼承的值擁有 0 - * 的特異性，body * 及類似擁有 0 的特異性。被繼承的值的特異性也為 0。