iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
3
Modern Web

前端新手村系列 第 16

前端新手村 CSS Cascade 串接

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

CSS Cascade[1]

Cascade 中文翻譯成「串接」。

Cascade 動作是由 Specificity 和 Ruleset order 作用,決定要套用的 CSS。

Specificity[2]

Specificity 在中文翻譯成「特定度」。

千言萬語,透過一個頁面可以說盡。
看不懂沒關係,只要繼續看下去。

定義 Specificity

首先,我們想知道 specificity 是多少,要計算 a, b, c, d 四個數字
所以,目的在搞懂這四個數字怎麼計算,就可以掌握 specificity

(a, b, c, d)
  • a
    • style,直接寫在 HTML element 的 style attribute,a = 1
  • b
    • b = 出現 id 選取器的次數
  • c
    • c = 出現 class 類別選取器的次數
    • c = 出現 [attribute=value] 屬性選取器的次數
    • c = 出現 :pseudoclasses 偽類選取器的次數
  • d
    • d = 出現 :sudoelements 偽元素選取器的次數
    • d = 出現 tagname 類型(HTML標籤)選取器的次數

計算 Specificity

  1. a, b, c, d 彼此不換算。(很重要)
  2. a, b, c, d 各別只會相加
  3. 結果是四個數字
  4. 特例
    1. value後面加 !important 直接在 a 前的第五位 +1
    2. * 選取器,不佔任何分數 +0

看個例子

#nav-global > ul > li > a.nav-link /* 0, 1, 1, 3 */
  • a = 0: 沒有寫在 HTML 的 style
  • b = 1: #nav-blobal
  • c = 1: .nav-link
  • d = 3: ul, li, a

Rulest order

Rulest order 翻譯成 規則集順序。

千言萬語,只要開「開發者模式」就可以看結果。

以結果來說圖中的 margin-top被覆寫。

定義 Rulest order

若出現兩個 Specificity 強度相同的 Ruleset ,晚宣告有較高的優先權。

是要改套件樣式,要掌握這個訣竅

看個例子

#nav-global > ul > li > a.nav-link {
    color: blue;
}
#nav-global > ul > li > a.nav-link {
    color: red;
}

最後的字型顏色,是紅色的。

參考資料

[1]: 《重構 CSS》
[2]: 9. Calculating a selector's specificity - w3.org


上一篇
前端新手村 偽元素
下一篇
前端新手村 Position 定位
系列文
前端新手村30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
小艾 ( Cami )
iT邦新手 5 級 ‧ 2018-01-09 00:24:34

突然發現不知道是不是小 Bug 的地方

  • d
    • c = 出現 :sudoelements 偽元素選取器的次數
    • c = 出現 tagname 類型(HTML標籤)選取器的次數

兩個 c 應該是 d 吧?

Chris iT邦新手 4 級 ‧ 2018-01-09 00:39:52 檢舉

你最認真看!!!XDDD

Chris iT邦新手 4 級 ‧ 2018-01-09 00:41:11 檢舉

改好了,謝囉~
怎麼這麼晚還不睡?

我在想下一篇要寫啥~QQ

我要留言

立即登入留言