iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
Modern Web

CSS大全閱讀筆記系列 第 11

第三章:權重與聯級(2)

  • 分享至 

  • xImage
  •  
  1. 聯級:
    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所寫的樣式無法使用。

上一篇
第三章:權重與聯級(1)
下一篇
第四章:數值與單位(1)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言