串接(cascade) 是瀏覽器用來決定樣式如何套用到元素上的方法。
有許多樣式可以套用到同一個元素上，當樣式沒有依照預期的方法被套用時，理解串接的運作方式就顯得格外重要
樣式的套用方法是依據選擇器的特徵與出現的順序來套用的。
特定度是所使用的CSS選擇器能精準地將元素識別出來的一種估測。
而特定度是可以被計算出來的
若將特定度帶入數字(a,b,c,d)
特定度要怎麼計算呢？
以下面這行CSS為例子
#nav-global > ul > li > a.nav-link{
color: #000000;
}
透過上述的演算法，我們可以算出這個選擇器的特定度是(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>
除非元素有透過style屬性套用行內樣式，否則樣式如何套用到元素上視特定度與規則集順序而定。
確保外部樣式的特定度比其他樣式(包括以style屬性套用的行內樣式)都還要來得高的唯一方法是在其宣告後加上!important。
若在同一個元素上有好幾個宣告區塊都帶有!important，則瀏覽器會使用最後一個出現的宣告區塊。
要注意的是!important不能用在帶有style屬性的樣式上
(即<a href="/" style="color: #1200FF !important">Link</a>)
一開始認識權重的時候以為權重只有三種區分方式
<style>裡面的沒想到除了寫的位置不同，選擇器也會影響到權重
iThome鐵人賽
看影片追技術