CSS 特異性
什麼是特異性？
如果有兩個或多個 CSS 規則指向同一個元素，特異性值最高的選擇器將“獲勝”，其樣式宣告將被應用於該 HTML 元素。
將特異性視為一個分數/排名，它決定了最終將哪個樣式宣告應用於元素。
看看下面的例子
示例 1
在此示例中，我們使用“p”元素作為選擇器，併為此元素指定了紅色。文字將是紅色的
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>你好世界！</p>
</body>
</html>
現在，看看示例 2
示例 2
在此示例中，我們添加了一個類選擇器（名為“test”），併為此類指定了綠色。文字現在將是綠色的（即使我們為元素選擇器“p”指定了紅色）。這是因為類選擇器具有更高的優先順序
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">你好世界！</p>
</body>
</html>
現在，看看示例 3
示例 3
在此示例中，我們添加了 ID 選擇器（名為“demo”）。文字現在將是藍色的，因為 ID 選擇器具有更高的優先順序
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">你好世界！</p>
</body>
</html>
現在，看看示例 4
示例 4
在此示例中，我們為“p”元素添加了內聯樣式。文字現在將是粉色的，因為內聯樣式具有最高的優先順序
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">你好世界！</p>
</body>
</html>
特異性層級
每個 CSS 選擇器在特異性層級中都有自己的位置。
有四個類別定義了選擇器的特異性級別
- 內聯樣式 - 示例：<h1 style="color: pink;">
- ID - 示例：#navbar
- 類、偽類、屬性選擇器 - 示例：.test, :hover, [href]
- 元素和偽元素 - 示例：h1, ::before
如何計算特異性？
記住如何計算特異性！
從 0 開始，每有一個 ID 值加 100，每有一個類值（或偽類或屬性選擇器）加 10，每有一個元素選擇器或偽元素加 1。
注意： 內聯樣式獲得特異性值 1000，並且始終具有最高優先順序！
注意 2： 這個規則有一個例外：如果您使用 !important 規則，它甚至會覆蓋內聯樣式！
下表展示了一些如何計算特異性值的示例
| 選擇器 | 特異性值 | 計算 |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0（通用選擇器被忽略） |
特異性值最高的選擇器將獲勝並生效！
考慮這三個程式碼片段
示例
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">標題</h1>
A 的特異性是 1（一個元素選擇器）
B 的特異性是 101（一個 ID 引用 + 一個元素選擇器）
C 的特異性是 1000（內聯樣式）
由於第三條規則 (C) 具有最高的特異性值 (1000)，因此將應用此樣式宣告。
更多特異性規則示例
特異性相同：最後規則獲勝 - 如果相同的規則在外部樣式表中被寫入兩次，則最後編寫的規則獲勝
ID 選擇器比屬性選擇器具有更高的特異性 - 看看下面的三行程式碼
示例
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
第一條規則比其他兩條更具體，因此將被應用。
上下文選擇器比單個元素選擇器更具體 - 嵌入式樣式表更接近要設定樣式的元素。所以在下面的情況下
示例
/* 來自外部 CSS 檔案：*/
#content h1 {background-color: red;}
/* 在 HTML 檔案中：*/
<style>
#content h1 {background-color: yellow;}
</style>
後者規則將被應用。
類選擇器勝過任意數量的元素選擇器 - 類選擇器（如 .intro）勝過 h1、p、div 等
通用選擇器 (*) 和繼承的值特異性為 0 - 通用選擇器 (*) 和繼承的值將被忽略！
