CSS樣式的優先級別

2021-07-08 09:49:11 字數 982 閱讀 2306

樣式不起作用時,多數是樣式優先順序或是樣式繼承的問題,在一遍文章看到很詳細的介紹,摘錄了下來和大家一起分享。(樣式效果圖)

優先原則一:文字從上到下,後出現的樣式優先於前面出現的同一樣式例:

測試1結果:所有瀏覽器均yellow色,注意:與class=」」 引號內的順序無關,只看.def1和.def2在宣告時的順序,.def2後宣告的所以權重高。

優先原則二:id宣告(即 # 開頭的樣式)> class宣告(即 . 開頭的樣式)> 標籤宣告(即 類似 div 開頭)

以上三種宣告處於不同的量級,份量上,div 開頭相當於 1克 重,. 開頭相當於 1公斤 重,# 開頭相當於 1噸 重。例:

測試2結果:所有瀏覽器均pink色,注意:雖然按優先原則一,後出現的權重高,但那只是在同樣重量級下的比較,優先原則二各重量級別就不同了。

優先原則三:數量取勝。如果同乙個樣式宣告即乙個大括號{}由多個 # . 或 div 組成,則權重按出現符號的量級增加

比如:#bb #tt #dd  則重量等於3噸

#bb .tt ul.dd li  則重量等於1噸2公斤2克,這麼精確的重量,就不需要舉例了吧。

再次說明:優先原則乙隻適用兩個樣式宣告同樣重的情況

優先原則四:『!important』。相當於無限重量,在之前已經有說明,需要注意:ie下,在同一條樣式宣告即乙個大括號中出現的!important 會被隨後出現的同名樣式沖洗掉。

dd結果:ie下,green色,background:yellow !important被後面的background:red沖洗了,而background:red與background:green的較量中,前者敗在優先原則一之下。

優先原則五:近水樓台。

直接寫在元素體內的style優先級別最高!(僅次於!important)用重量來形容,可以定為百萬噸量級。

dd結果:black色。

dd結果:red色。

dd結果:black色。

下面的**應用了上面的優先順序,請看效果。

css樣式優先順序

多重樣式將層疊為乙個 樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中,在 html 頁的頭元素中,或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。層疊次序 當同乙個 html 元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有...

CSS樣式優先順序

css樣式分為內聯樣式和外部樣式,一般情況下 內聯樣式的優先順序大於外部樣式。即style樣式 id選擇器 class選擇器 元素選擇器。例如 on person num li當對li標籤新增上面兩個樣式時,on樣式中重複的內容是不會生效的。因為.on樣式的優先順序值小於li,它會被li樣式覆蓋。但...

css樣式優先順序

css樣式分類 外聯樣式,內部樣式,內聯樣式,行內樣式 標籤屬性 優先順序 行內樣式 標籤屬性 外聯樣式 內部樣式 內聯樣式,這裡的高度為110px class login class imgs 選擇器 權值內聯樣式表的權值最高 1000 id 選擇器的權值 100class 類選擇器的權值 10h...