跳到主要內容

CSS 樣式覆蓋規則

參考連結(2018更新):CSS Specificity

在複雜的頁面裡,HTML元素套用到互相衝突的CSS指定的情形並不少見
本篇文章會說明元素的CSS指定來源以及設定的優先順序
寫出正確、有效率的CSS對於網頁表現絕對有很大的幫助

CSS套用規則有以下重點:

1.CSS樣式的繼承

部分CSS指定會讓子代元素繼承相同指定,例如 font-size、font-family等
當祖先之間的指定並不相同時,會以較接近的祖先的樣式為準

實務上常見指定font CSS給body,讓整個頁面都以相同的字體大小、風格呈現
不過當某個區塊被指定了不同的font CSS,其子代元素呈現的CSS就會是該區塊的CSS指定

2.直接指定給元素的CSS樣式

直接指定的CSS套用優先度高於繼承的
其實跟上一點有關,離自己越近的規則的優先度越高,當然指定給自己的就是最優先囉

3.直接指定的樣式發生衝突時,以指定方式的加權值高者優先


CSS selectors                  權值

Type selectors                     1

Class selectors                   10

ID selectors                     100

Descendant selectors
Adjacent sibling selectors
Child selectors 等          1000

Pseudo element                   1

Pseudo classes                  10

CSS 基礎與選擇器使用一文中,有提到越多層次的選擇器指定會降低效率
不過當頁面複雜度高時,有時候也只能多套用選擇器來提升指定加權值

4.當CSS樣式加權值相同時,後指定者優先套用

留言