優先權

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

隨堂測驗

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

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 分
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 獲勝的唯一案例。 只要在其他選取器指定相同元素時,即可達成這個目標。

資源