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;
}
元素或虛擬元素選取器
類型選取器
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 選取器 (#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="#"]
的具體性分數為何?
a
的價值為 1 分,但 [href="#"]
可以獲得 10 分。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
article.card.dark
article:hover a[href]
以視覺化的方式呈現特定內容
在圖表和具體性計算工具中,具體單位通常會以下列方式呈現:
左側群組是 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 供應商會勝出。如此一來,這個網址都必須與指定同一個元素的其他選取器明確相符。