參考連結(2018更新)：CSS Specificity
在複雜的頁面裡，HTML元素套用到互相衝突的CSS指定的情形並不少見
本篇文章會說明元素的CSS指定來源以及設定的優先順序
寫出正確、有效率的CSS對於網頁表現絕對有很大的幫助
CSS套用規則有以下重點：
當祖先之間的指定並不相同時，會以較接近的祖先的樣式為準
實務上常見指定font CSS給body，讓整個頁面都以相同的字體大小、風格呈現
不過當某個區塊被指定了不同的font CSS，其子代元素呈現的CSS就會是該區塊的CSS指定
其實跟上一點有關，離自己越近的規則的優先度越高，當然指定給自己的就是最優先囉
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 基礎與選擇器使用一文中，有提到越多層次的選擇器指定會降低效率
不過當頁面複雜度高時，有時候也只能多套用選擇器來提升指定加權值
在複雜的頁面裡，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 基礎與選擇器使用一文中，有提到越多層次的選擇器指定會降低效率
不過當頁面複雜度高時，有時候也只能多套用選擇器來提升指定加權值
留言
張貼留言