2021/11/04（四）
線上課程 網頁開發 學習進度 進度紀錄 64/554。
https://www.udemy.com/...
064、Specificity

上一噗：

@MajimeF - 2021/11/03（三） #線上課程 #網頁開發 #學習進度 #進度紀錄 63/...

此課程 書籤噗 ：

@MajimeF - #書籤噗 #線上課程學習紀錄 #網頁開發

优先级 - CSS（层叠样式表） | MDN

繁中：特定度。

CSS的重要規則之二。

CSS 選擇器有不同程度的「特定度」。

例：ID 比 class 更為特定。

如果有個標籤有兩個 CSS selectors ，它會選擇「比較特定的那個」加入樣式。

1、id - specificity ( 1, 0, 0 )
2、class - specificity ( 0, 1, 0 )
3、tag - specificity ( 0, 0, 1 )

數字愈前面就愈特定。
比如 id（1在第一格）就比 class（1在第二格）特定。

如果有兩個選擇器…

h1.redText {
color: red;
}

h1 {
color: blue;
}

特定度計算示範

h1.redText
h1 是一個 tag，所以第三格是1（tag：0,0,1）
redText 是 class，所以第二格是1（class：0,1,0）
沒有 id，所以第一格是空的就是0（id：1,0,0）

所以 h1.redText 的特定度是（0,1,1）

h1 是 tag，特定度為（0,0,1）

數字愈前面的特定度愈高…
因此 h1.redText（0,1,1）更為特定。

更特定的那個就會把樣式放上去！
且不管「cascading」這個規則。

因此，雖然 h1 指定藍色在更下面…
但 h1.redText 特定度更高

所以還是會呈現 h1.redText 是紅色。

特定度比較示範
（1,0,0）→1
（0,1,1）→後面相加是2

但特定度是看「前面」，所以
（1,0,0）＞（0,1,1）

特定度比較2
（1,0,0）
（1,1,0）→更為特定！因為 1 比較靠前。

特定度判斷的輔助，vs code 中的好用工具。
把滑鼠游標移動到 CSS selector 上，就會呈現出特定度。

所以其實不用自己辛苦計算XD

發現「權重」這詞其實更好懂啊～

Day20：小事之 CSS 權重 (css specificity) - iT 邦幫忙::一起幫忙解決難...

反正就是優先權。
CSS會放上優先權高的樣式。

如果完全一樣…就看誰在下面。
這是 cascade 階層式的基本原則。

倒是上面的站那個權重居然是四位數…
不過我在 vs code 裡面只看到三位數的說XD

Selector Specificity 選擇器特定度（權重、優先值）

下一噗：

@MajimeF - 2021/11/05（五） #線上課程 #網頁開發 #學習進度 #進度紀錄 65/...

CSS 樣式規則3：Inheritance