iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
1
Modern Web

三十哩路,我的前端學習路程系列 第 11

Day11::我所知道的 CSS重構 第二章瞭解串接

  • 分享至 

  • xImage
  •  

第二章 瞭解串接

什麼是串接?

串接(cascade) 是瀏覽器用來決定樣式如何套用到元素上的方法。
有許多樣式可以套用到同一個元素上,當樣式沒有依照預期的方法被套用時,理解串接的運作方式就顯得格外重要
樣式的套用方法是依據選擇器的特徵與出現的順序來套用的。

特定度是所使用的CSS選擇器能精準地將元素識別出來的一種估測。
而特定度是可以被計算出來的
若將特定度帶入數字(a,b,c,d)

  1. 若樣式透過style屬性來套用,則a=1;否則a=0。
  2. b等於ID選擇器的數目
  3. c等於類別選擇器、屬性選擇器與虛擬類別的數目
  4. d等於類型選擇器與虛擬元素的數目
    把這些數值連接起來就可得到特定度。

特定度要怎麼計算呢?
以下面這行CSS為例子

#nav-global > ul > li > a.nav-link{
  color: #000000;
}
  1. 選擇器不是透過style屬性套用,所以a=0
  2. 有1個ID選擇器(#nav-global),所以b=1
  3. 有1個類別選擇器(.nav-link),所以c=1
  4. 有3個類型選擇器(ul, li, a),所以d=3

透過上述的演算法,我們可以算出這個選擇器的特定度是(0,1,1,3)
比較選擇器的特定度時,離左邊最遠的最大數字具有最高的特定度,若第二個數值相等則比較下一個數字。
比方說(1,0,0,0)比(0,1,1,3)有更高的特定度,同樣的(0,2,1,3)比(0,1,1,3)有更高的特定度。

規則集順序

規則集順序(ruleset order)代表一份CSS規則集在樣式表中的位置。
當內含具有相同特定度選取器的第二個宣告區塊都被用來指定一個元素的樣式時,在樣式表中較晚出現的宣告區塊會具有較高的優先權。
(後進先出的概念)

<head>
  <style type="text/css">
    #nav-global > ul > li > a.nav-link{
      color: #FFFFFF;
    }
    
    #nav-global > ul > li > a.nav-link{
      color: #000000;
    }
  </style>
</head>

行內CSS與特定度

除非元素有透過style屬性套用行內樣式,否則樣式如何套用到元素上視特定度與規則集順序而定。

以!important 宣告複寫串接

確保外部樣式的特定度比其他樣式(包括以style屬性套用的行內樣式)都還要來得高的唯一方法是在其宣告後加上!important。

若在同一個元素上有好幾個宣告區塊都帶有!important,則瀏覽器會使用最後一個出現的宣告區塊。

要注意的是!important不能用在帶有style屬性的樣式上
(即<a href="/" style="color: #1200FF !important">Link</a>)

心得

一開始認識權重的時候以為權重只有三種區分方式

  1. 寫在<style>裡面的
  2. 寫在標籤裡面的
  3. 寫在CSS檔案裡面的

沒想到除了寫的位置不同,選擇器也會影響到權重


上一篇
Day10::我所知道的 CSS重構 第一章重構與架構
下一篇
Day12::我所知道的 CSS重構 第三章編寫較佳的CSS
系列文
三十哩路,我的前端學習路程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言