一、優先順序分類
通常可以將css的優先順序由高到低分為6組:
第一優先順序:無條件優先的屬性只需要在屬性後面使用!important。它會覆蓋頁面內任何位置定義的元素樣式。ie6不支援該屬性。
第二優先順序:在html中給元素標籤加style,即內聯樣式。該方法會造成css難以管理,所以不推薦使用。
第三優先順序:由乙個或多個id選擇器來定義。例如,#id會覆蓋.classname
第四優先順序:由乙個或多個類選擇器、屬性選擇器、偽類選擇器定義。如.classname會覆蓋div
第五優先順序:由乙個或多個型別選擇器定義。如div覆蓋*
第六優先順序:通配選擇器,如*
二、選擇器的權重及優先規則
在css中,會根據選擇器的特殊性來決定所定義的樣式規則的次序,具有更特殊選擇器的規則優先於一般選擇器的規則。如果兩個規則的特殊性相同,那麼後定義的規則優先。
那麼如何計算選擇器的特殊性呢?那就要用到選擇器的權重計算了。計算規則如下圖:
我們把特殊性分為4個等級,每乙個等級代表一類選擇器,沒個等級的值相加得出選擇器的權重。
4個等級的定義如下:
第二等級:代表id選擇器,如#content,權值為100
第三等級:代表類,偽類和屬性選擇器,如.content,權值為10
第四等級:代表標籤選擇器和偽元素選擇器,如div p,權值為1
注意:通用選擇器(*),子選擇器(>),和相鄰同胞選擇器(+)並不在這個等級中,所以他們的權值為0
三、優先順序不起作用
如果遇到了似乎沒有起作用的css規則,很可能是出現了特殊性衝突。這時可以在選擇器中新增他的乙個父元素的id,從而提高他的特殊性。如果這能解決問題,就說明樣式表中其他地方很可能有更特殊的規則,他覆蓋了你的規則。此時需要檢查**,解決特殊性衝突,讓**盡可能的簡潔。
CSS 選擇器優先順序(權重)
請問div的背景顏色為紅色還是綠色呢?lang en charset utf 8 documenttitle divstyle head style background color green div body html 答案為綠色。為什麼會是綠色呢?難道存在 執行的先後的覆蓋問題?請看第二個問題...
CSS 選擇器權重(優先順序)
計算指定選擇器的優先順序 重新認識css的權重 important 加1,0,0,0 id 選擇器 如 id 加0,1,0,0 class 類選擇符 如 class 每個屬性選擇符 如 attribute 每個偽類 如 hover 加0,0,1,0 元素選擇符 如p 或偽元素選擇符 如 firstc...
CSS選擇器權重計算
css各種選擇器的權重 1.id選擇器 100 2.類 屬性 偽類選擇器 10 3.元素 偽元素選擇器 1 4.其他選擇器 0 如果有兩個css樣式都作用於某元素,如 id link a href id 100 link 10 a 1 href 0 111 id link.active id 100...