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;
}
類別、虛擬類別或屬性選取器
類別選取器
.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="#"]
」的具體性分數為何?
內容的具體性
每個符合元素的選取器明確程度會相加。 請參考以下 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.card.dark
article > section
article:hover a[href]
以視覺化方式呈現特異性
在圖表和細項計算器中 具體做法通常以下方形式呈現:
左側群組是 id
個選取器。
第二個群組是類別、屬性和虛擬類別選取器。
最後一個群組是元素和虛擬元素選取器。
以下是 0-4-1
的選取器供您參考:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
隨堂測驗
測試您是否瞭解以視覺化方式呈現特定性
以下哪一個選取器是 1-2-1
?
#specialty:hover li.dark
li#specialty section.dark
section#specialty.dark
[data-state-rad].dark#specialty:hover
大幅提高詳細程度
假設我們的 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 獲勝的唯一案例。 只要在其他選取器指定相同元素時,即可達成這個目標。