優(yōu)先級是瀏覽器是通過判斷哪些屬性值與元素最相關以決定并應用到該元素上的胃珍。優(yōu)先級僅由選擇器組成的匹配規(guī)則決定的。
優(yōu)先級就是分配給指定的CSS聲明的一個權重,它由匹配的選擇器中的每一種選擇器類型的數(shù)值決定。
優(yōu)先級順序
下列是一份優(yōu)先級逐級增加的選擇器列表:
通用選擇器(*)
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內聯(lián)樣式
!important 規(guī)則例外
當 !important 規(guī)則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪里. 盡管如此, !important規(guī)則還是與優(yōu)先級毫無關系.使用 !important 不是一個好習慣,因為它改變了你樣式表本來的級聯(lián)規(guī)則谱煤,從而使其難以調試。
一些經(jīng)驗法則:
Always?要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是?!important
Only?只在需要覆蓋全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定頁面中使用?!important
Never?永遠不要在全站范圍的 css 上使用?!important
Never?永遠不要在你的插件中使用?!important
權重計算:
解釋:
?1. 內聯(lián)樣式表的權值最高 1000禽拔;
?2. ID 選擇器的權值為 100
?3. Class 類選擇器的權值為 10
?4. HTML 標簽選擇器的權值為 1
利用選擇器的權值進行計算比較刘离,em 顯示藍色,示例如下:https://c.runoob.com/codedemo/3048
CSS 優(yōu)先級法則:
?A 選擇器都有一個權值睹栖,權值越大越優(yōu)先硫惕;
?B 當權值相等時,后出現(xiàn)的樣式表設置要優(yōu)于先出現(xiàn)的樣式表設置野来;
?C 創(chuàng)作者的規(guī)則高于瀏覽者:即網(wǎng)頁編寫者設置的CSS 樣式的優(yōu)先權高于瀏覽器所設置的樣式恼除;
?D 繼承的CSS 樣式不如后來指定的CSS 樣式;
?E 在同一組屬性設置中標有“!important”規(guī)則的優(yōu)先級最大曼氛;示例如下:https://c.runoob.com/codedemo/3049?
結果:在Firefox 下顯示為藍色豁辉;在IE 6 下顯示為紅色;
這里引入一張流行的CSS權重關系圖: