html中css樣式的優先順序規則

2021-09-01 17:07:27 字數 1184 閱讀 1769

css2.1 中規定了關於 css 規則 specificity(特異性)的計算方式,用乙個四位的數字串(注:css2 中是用三位)來表示,最後以 specificity 的高低判斷 css 的優先權。

specificity 具體的計算規則:

元素的 style 樣式屬性,加 1,0,0,0。

每個 id 選擇符(#id),加 0,1,0,0。

每個 class 選擇符(.class)、每個屬性選擇符(例 [attr=」"] )、每個偽類(例 :hover),加 0,0,1,0。

每個元素或偽元素(例 :firstchild)等,加 0,0,0,1。

其他選擇符(例 全域性選擇符 *,子選擇符 >),加 0,0,0,0。

最後逐位相加數字串,得到最終的 specificity 值,按照從左到右的順序逐位比較。

除了 specificity 還有一些其他規則:

!important 宣告的規則高於一切,如果 !important 宣告衝突,則比較優先權。

如果優先權一樣,則按原始碼中「後來者居上」的原則。

由繼承而得到的樣式屬性不參與 specificity 的計算,低於一切其他規則(例 全域性選擇符 * )。

範例分析:

h1 /*

只有乙個普通元素加成,結果是 0,0,0,1

*/body h1 /*

兩個普通元素加成,結果是 0,0,0,2

*//*

0,0,0,1 小於 0,0,0,2 ,後者勝出

*/h2.grape /*

乙個普通元素、乙個class選擇符加成,結果是 0,0,1,1

*/h2 /*

乙個普通元素,結果是 0,0,0,1

*//*

0,0,1,1 大於 0,0,0,1 ,前者勝出

*/html > body table tr[id=」totals」] td ul > li /*

7個普通元素、乙個屬性選擇符、兩個其他選擇符(子選擇符 >),結果是0,0,1,7

*/li#answer /*

乙個id選擇符,乙個普通選擇符,結果是0,1,0,1

*//*

0,0,1,7 小於 0,1,0,1,後者勝出

*/

--引自

補充:important的用法:

例如:

#a

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...