第三章：權重與聯級（2）

第 11 屆 iThome 鐵人賽

DAY 11

Modern Web

CSS大全閱讀筆記系列第 11 篇

11th鐵人賽

Camellus

2019-09-27 23:08:54

772 瀏覽

分享至

聯級：
a. 當兩個權重相同的規則套至同一個元素上，依聯級決定最後套用的規則。
b. 聯級規則
- 依重要性排序：當兩個規則套至同一個元素上時，標記!important者勝出。若是有套至同一元素兩個規則都標示了!important，則依照權重決定勝出者。
- 依來源排序：套至元素的規則來源也會影響最終結果，在來源方面，層級從高到低的排列為：讀者重要宣告>網頁作者重要宣告>網頁讀者一般宣告>讀者一般宣告>使用者代理宣告（網頁瀏覽器原始設定），如果規則標示了!important，讀者來源會覆蓋網頁作者來源，如果沒有標示，結果會相反，因為前四項來源都會覆蓋使用者代理宣告，所以網頁作者通常只需要考慮前四項。
- 依權重排序：如果套用到元素上的衝突宣告有相同的重要性與來源，就會依權重排序，回歸行內元素>ID>class>元素>通用選擇器（*）的規則，權重高者勝出。
- 依序位排序：當衝突規則有相同的重要性、來源與權重，序位就是決定最後勝出者的關鍵，已在樣式表中較晚出現者為最後勝出者，如果出現在不同樣式表中，後匯入的樣式表會勝出。
- 非CSS的呈現建議：如果文件中有類似<font>元素的非CSS呈現建議，權重為0，會覆蓋使用者代理樣式，但不會被網頁作者樣式和讀者樣式覆蓋。
c. 連結樣式的設定：
- 當只有一種連結狀態時，一般建議依照LVFHA（:link>:visited>:focus>:hover>:active）或是VLFHA（:visited>:link>:focus>:hover>:active）兩種序位，如果擁有兩種以上的連結狀態，先解決權重，再查看排序。
- 建議的規則中，因為:link和:visited是兩個相斥的狀態，所以前後互換並沒有影響，但因為所有的連結都可以分為:link和:visited兩種，因此如果這兩種連結狀態寫在最後，會導致之前:focus、:hover和:active所寫的樣式無法使用。