優先權

CSS Podcast - 003：具體性

假設您目前使用以下 HTML 和 CSS：

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

這裡有兩個競爭規則 其中一個會讓按鈕顏色變成紅色，另一個則是藍色。 請問元素會套用哪項規則？ 瞭解 CSS 規格演算法的具體細節 是瞭解 CSS 如何在競爭規則中做出決定的關鍵。

明確性是瀑布圖四個不同階段的 相關資訊請參閱上一個單元的串列式。

優先權評分

每個選取器規則都會有分數。 您可以將明確性視為總分，每種選取器類型都能獲得該分數。 得分最高的選擇器即為競價勝出者。

具體而言，在實際專案中 可確保您套用的 CSS 規則確實適用 同時維持較低的分數以避免複雜。 分數只能視需要達到 而不是追求最高的分數 日後，您可能會需要套用一些真正更為重要的 CSS。 如果你的分數最高，會讓工作變得困難。

計算各選取器類型的評分

每種選取器類型都能獲得積分。 將這些點加起來，即可計算出選取器的整體明確性。

通用選取器

通用選取器 (*) 不含特細項，且可獲得 0 分。 換言之，只要規則的分數超過 1 分，就會覆寫這項設定

* {
  color: red;
}

元素或虛擬元素選取器

元素 (類型) 或 虛擬元素 選取工具可取得 1 個具體點。

類型選取器

div {
  color: red;
}

虛擬元素選取器

::selection {
  color: red;
}

類別、虛擬類別或屬性選取器

類別 虛擬類別或 屬性選取器可取得 10 個明確點。

類別選取器

.my-class {
  color: red;
}

虛擬類別選取器

:hover {
  color: red;
}

屬性選取器

[href='#'] {
  color: red;
}

:not() 虛擬類別本身不會針對具體的計算新增任何項目。 不過，以引數傳入的選取器會新增至具體的計算。

div:not(.my-class) {
  color: red;
}

這個範例的專長有 11 點 因為 :not() 內含一個類型選取器 (div) 和一個類別。

ID 選取器

ID 選取器可獲得 100 個明確點 只要使用 ID 選取器 (#myID) 而非屬性選取器 ([id="myID"]) 即可。

#myID {
  color: red;
}

內嵌樣式屬性

CSS 會直接套用至 HTML 元素的 style 屬性。 獲得具體性分數 1,000 分。 也就是說，如要在 CSS 中覆寫這項設定 您就必須編寫非常具體的選取器

<div style="color: red"></div>

!important 項規則

最後，CSS 值結尾的 !important 可獲得 10,000 點的具體分數。 這是個別項目所能取得的最高特異度。

!important 規則會套用至 CSS 資源 因此整體規則 (選取器和屬性) 中的所有項目不會獲得相同的明確性分數。

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

隨堂測驗

測試您對專有評分的瞭解程度

內容的具體性

每個符合元素的選取器明確程度會相加。 請參考以下 HTML 範例：

<a class="my-class another-class" href="#">A link</a>

這個連結包含兩個類別。 新增下列 CSS，即可獲得 1 點特權：

a {
  color: red;
}

參照此規則中的其中一個類別。 而現在有 11 點專責點：

a.my-class {
  color: green;
}

將其他類別加進選取器 目錄現在有 21 個特有點：

a.my-class.another-class {
  color: rebeccapurple;
}

在選取器中加入 href 屬性。 但現在有 31 點特餐：

a.my-class.another-class[href] {
  color: goldenrod;
}

最後，將 :hover 虛擬類別新增至該類別， 選取器最終會有 41 個明確點：

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

隨堂測驗

測試您對專有評分的瞭解程度

以視覺化方式呈現特異性

在圖表和細項計算器中 具體做法通常以下方形式呈現：

左側群組是 id 個選取器。 第二個群組是類別、屬性和虛擬類別選取器。 最後一個群組是元素和虛擬元素選取器。

以下是 0-4-1 的選取器供您參考：

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

隨堂測驗

測試您是否瞭解以視覺化方式呈現特定性

大幅提高詳細程度

假設我們的 CSS 如下：

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

使用類似下方的 HTML：

<button class="my-button" onclick="alert('hello')">Click me</button>

按鈕背景為灰色 因為第二個選擇器可獲得 11 點專責點 (0-1-1)。 這是因為其中有一個類型選取器 (button)。 也就是「1 點」和屬性選取器 ([onclick])，也就是「10 點」。

上一個規則 -.my-button 可獲得 10 分 (0-1-0)， 因為只有一個類別選取器

如果想提升這項規則的成效 重複類別選取器，如下所示：

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

現在，按鈕的背景為藍色 因為新的選取器獲得的具體分數為 20 分 (0-2-0)。

相符的特有度分數看到最新的例項勝出

我們先繼續使用按鈕範例，接著將 CSS 切換為以下位置：

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

按鈕背景為灰色 因為兩個選取器都有相同的明確性分數 (0-1-0)。

如果切換來源順序的規則： 將按鈕呈現藍色

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

這是新版 CSS 獲勝的唯一案例。 只要在其他選取器指定相同元素時，即可達成這個目標。

資源

• CSS 規格
• 特異性計算機
• MDN 具體性
• CSS 具體性說明
• 其他特異性計算工具