CSS執行優先順序

在 CSS 中，選擇器和連結器用於定義樣式的應用範圍和規則。在 HTML 中，你可以使用不同的方法引用 CSS 檔案，將樣式應用到 HTML 標記中。在設計網頁時，CSS 的執行優先順序很重要，以確保正確的樣式應用到正確的元素上。

以下是一些關於 CSS 選擇器及連結器、引用 CSS 檔案以及執行優先順序的重要概念：

選擇器和連結器：

選擇器（Selectors）： 選擇器用於選擇要應用樣式的 HTML 元素。例如，div、.class、#id 都是選擇器。 連結器（Combinators）： 連結器用於組合選擇器，以定義元素之間的關係。例如，空格表示後代選擇器，">" 表示子代選擇器，"+" 表示相鄰兄弟選擇器。

引用 CSS 檔案：

• 外部樣式表： 透過 < link > 標籤在 HTML 文件中引用外部 CSS 檔案。這是最常見的方式，有助於分離 HTML 結構和樣式定義。

<link rel="stylesheet" type="text/css" href="styles.css">

• 內部樣式表： 在 HTML 文件的 < head > 元素中使用 < style > 標籤定義樣式。

<style>
  /* CSS 樣式定義 */
</style>

• 內聯樣式： 直接在 HTML 元素的 style 屬性中定義樣式。

<div style="color: red;">這是紅色的文字。</div>

執行優先順序：

• 內聯樣式 > 內部樣式表 > 外部樣式表： 如果相同的屬性在不同的位置進行定義，則內聯樣式（直接在 HTML 元素上定義）的優先順序最高，其次是內部樣式表，最後是外部樣式表。
• 特殊性（Specificity）： 如果有多個選擇器都適用於同一元素，則通過特殊性來確定樣式的優先順序。特殊性是由選擇器的不同部分（元素、類別、ID等）組成的。
• 後來者優先（!important）： 如果在樣式規則中使用了 !important，則該規則將優先應用，即使它的特殊性低於其他規則。

特殊性（Specificity）

特殊性（Specificity）是一個用來確定 CSS 樣式規則優先順序的概念。它用來解決當多個選擇器應用到同一元素時，決定哪一個樣式規則應該優先的問題。特殊性是根據選擇器的組成部分來計算的，通常以四個部分的數字表示，形如 a, b, c, d。

以下是特殊性的詳細說明：

• 元素選擇器的特殊性（a）：0, 0, 0, 1
• 類別、伪类、屬性選擇器的特殊性（b）：0, 0, 1, 0
• ID 選擇器的特殊性（c）：0, 1, 0, 0
• 內聯樣式的特殊性（d）：1, 0, 0, 0

這四個數字組成的特殊性值是按照上面的順序計算的，並且當選擇器有多個部分時，每一部分都用這種方式計算。比如，h1 選擇器的特殊性為 0, 0, 0, 1，.example 選擇器的特殊性為 0, 0, 1, 0。

在比較兩個特殊性時，從左到右逐位比較，越左邊的位數越優先。只有在比較到最右邊的位數時，仍然相等的情況下，才會比較下一個位數。

例如，0, 1, 0, 0 的特殊性值比 0, 0, 1, 0 更高，因為在第二個位數上有不同。這意味著具有更高特殊性的樣式規則將優先應用於元素。

有一些注意事項：

• 不同部分的特殊性值之間是互不影響的，即使其中一個部分的值很大，其他部分仍然可以比較。
• 通常情況下，使用更具體的選擇器來增加特殊性是一種良好的實踐，但應謹慎使用，以免造成過度複雜和難以維護的代碼。

 

特殊性（Specificity）主要應用在選擇器上，而非單一的屬性。然而，當我們談論到樣式規則的特殊性時，實際上是在討論整個選擇器的特殊性，而不僅僅是其中的屬性。這裡有一些常見的選擇器及其相應的特殊性，以及其中包含的屬性：

• 元素選擇器：

  • 選擇器：div
  • 特殊性：0, 0, 0, 1

• 類別選擇器：

  • 選擇器：.example
  • 特殊性：0, 0, 1, 0

• ID 選擇器：

  • 選擇器：#uniqueId
  • 特殊性：0, 1, 0, 0

• 組合選擇器：

  • 選擇器：div.example
  • 特殊性：0, 0, 1, 1（兩個選擇器的特殊性相加）

• 通用選擇器：

  • 選擇器：*
  • 特殊性：0, 0, 0, 0

• 屬性選擇器：

  • 選擇器：input[type="text"]
  • 特殊性：取決於選擇器中的元素、類型和屬性數量

• 偽類選擇器：

  • 選擇器：:hover
  • 特殊性：取決於選擇器中的元素、類型和屬性數量

• 子代選擇器：

  • 選擇器：div > p
  • 特殊性：取決於選擇器中的元素、類型和屬性數量

• 後代選擇器：

  • 選擇器：div p
  • 特殊性：取決於選擇器中的元素、類型和屬性數量

• 兄弟選擇器：

  • 選擇器：h2 + p
  • 特殊性：取決於選擇器中的元素、類型和屬性數量

這些選擇器和相應的特殊性值用於確定樣式規則的優先順序。當多個樣式應用到同一元素時，特殊性值高的規則優先於特殊性值低的規則。