優先權

CSS Podcast - 003: 具體來說

假設您使用的是下列 HTML 和 CSS：

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

button {
  color: red;
}

.branding {
  color: blue;
}

因此需要遵守兩項規範。 第一線會將按鈕塗上紅色，另一個會塗上藍色。 哪個規則會套用至元素？ 瞭解 CSS 規格的明確性演算法，是瞭解 CSS 如何決定競爭規則的關鍵。

具體性是 Cascade 的四個不同階段之一，詳情請參閱最後一個單元的「瀑布」部分。

明確性評分

每項選取條件規則都會獲得分數。 您可以將具體性視為總分數，每一種選取器都會獲得以該分數所得分數。 分數最高的選取器將勝出。

在真實專案中，平衡作業可確保您預期的 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 選取器 (#myID) 而非屬性選取器 ([id="myID"])，ID 選取器就會取得 100 個特定度點。

#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 */
}

隨堂測驗

測驗您對具體性評分的瞭解程度

a[href="#"] 的具體性分數為何？

1
a的價值為 1 分，但 [href="#"] 可以獲得 10 分。
5
請再試一次！
11
a 可獲得 1 分，[href="#"] 值 10 分，因此總分為 11 分。

特定情境中的明確性

系統會加總與元素相符的每個選取器的特性。 以以下 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;
}

隨堂測驗

測驗您對具體性評分的瞭解程度

以下哪個選取器價值 21 分？

article > section
元素的價值為 1 分，選取器中有 2 個元素，因此價值 2 分。
article.card.dark
元素的價值為 1 點，類別的價值為 10 分；而有 2 個類別和 1 個元素，這個選取器的數值會是 21 分。
article:hover a[href]
元素的價值為 1 點，虛擬類別和屬性的值為 10 分，元素則獲得 2 點，屬性和類別則為 20 點，因此這個選取器的數值為 22 點。

以視覺化的方式呈現特定內容

在圖表和具體性計算工具中，具體單位通常會以下列方式呈現：

展示最明確至最不特定選取器的圖表

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

以下選取器為 0-4-1，供您參考：

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

隨堂測驗

測驗您對於具體程度的相關知識

以下哪個選取器是 1-2-1？

section#specialty.dark
這個選取器以 1-1-1 視覺化呈現。
#specialty:hover li.dark
🎉
[data-state-rad].dark#specialty:hover
這個選取器以 1-3-0 視覺化呈現。
li#specialty section.dark
這個選取器以 1-1-2 視覺化呈現。

透過實用提示提高明確性

假設有一些 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 供應商會勝出。如此一來，這個網址都必須與指定同一個元素的其他選取器明確相符。

資源