參考連結(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 ...