級聯

Created: November-22, 2018

級聯和特異性一起用於確定 CSS 樣式屬性的最終值。他們還定義瞭解決 CSS 規則集中衝突的機制。

CSS 載入訂單

按以下順序從以下來源讀取樣式：

使用者代理樣式表（瀏覽器供應商提供的樣式）
使用者樣式表（使用者在其瀏覽器上設定的附加樣式）
作者樣式表（此處作者是指網頁/網站的建立者）
- 也許一個或多個 .css 檔案
- 在 HTML 文件的 <style> 元素中
內聯樣式（在 HTML 元素的 style 屬性中）

瀏覽器將在渲染元素時查詢相應的樣式。

如何解決衝突？

當只有一個 CSS 規則集試圖為元素設定樣式時，則沒有衝突，並且使用該規則集。

當發現具有衝突設定的多個規則集時，首先使用特定規則規則，然後使用級聯規則來確定要使用的樣式。

示例 1 - 特異性規則

.mystyle { color: blue; }  /* specificity: 0, 0, 1, 0 */
div { color: red; }        /* specificity: 0, 0, 0, 1 */

<div class="mystyle">Hello World</div>

文字是什麼顏色的？（懸停看答案）

藍色

首先應用特異性規則，具有最高特異性的規則獲勝。

示例 2 - 具有相同選擇器的級聯規則

外部 css 檔案

.class {
  background: #FFF;
}

內部 css（在 HTML 檔案中）

<style>
.class {
  background: #000;
}
<style>

在這種情況下，如果你有相同的選擇器，則級聯啟動，並確定最後一個載入獲勝。

示例 3 - 特殊性規則之後的級聯規則

body > .mystyle { background-color: blue; }   /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; }  /* specificity: 0, 0, 1, 1 */

<body class="otherstyle">
  <div class="mystyle">Hello World</div>
</body>

背景是什麼顏色的？

紅色

應用特異性規則後，藍色和紅色之間仍然存在衝突，因此級聯規則應用於特異性規則之上。級聯檢視規則的載入順序，無論是在同一 .css 檔案內還是在樣式源集合中。最後一個載入會覆蓋任何早期版本。在這種情況下，.otherstyle > div 規則勝利。

最後一點

選擇器特異性始終優先。
樣式表訂單打破關係。
內聯樣式勝過一切。