CSS樣式優先順序

2022-01-10 13:34:53 字數 1848 閱讀 4579

當樣式表比較複雜時,很容易出現多個樣式對作用於乙個標籤的情況,這時就需要注意css優先順序來決定哪些樣式會被作用於該標籤,哪些會被覆蓋。

對於標籤自有的屬性,選擇器的優先順序規則為:

內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器
當如下幾個選擇器作用於同乙個標籤時本例顯示的顏色為red,可以在瀏覽器的elements選中相應元素,在styles檢視樣式的覆蓋情況並除錯。

t1

選擇符是由基本選擇器組成,基本分為:

後代選擇符: #i1 .c1 .c2

子選擇符:#i1 > .c1 > .c2

相鄰選擇符:.c1 + .c2

計算選擇符中id選擇器的個數a,計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和b,計算選擇符中標籤選擇器和偽元素選擇器的個數之和c。按abc的順序依次比較大小,大的則優先順序高,相等則比較下乙個。若最後兩個的選擇符中abc都相等,則按照"就近原則"來判斷,此外,擁有!important的屬性具有最高的優先順序。

t2

第乙個選擇符 a:1 b:0 c:1

第二個選擇符 a:0 b:1 c:1

第三個選擇符 a:0 b:0 c:2

第四個選擇符 a:0 b:1 c:0

第五個選擇符 a:0 b:0 c:1

優先順序順序依次為: 1 2 4 3 5

引自

在學習過程中,你可能發現給選擇器加權值的說法,即 id 選擇器權值為 100,類選擇器權值為 10,標籤選擇器權值為 1,當乙個選擇器由多個 id 選擇器、類選擇器或標籤選擇器組成時,則將所有權值相加,然後再比較權值。這種說法其實是有問題的。比如乙個由 11 個類選擇器組成的選擇器和乙個由 1 個 id 選擇器組成的選擇器指向同乙個標籤,按理說 110 > 100,應該應用前者的樣式,然而事實是應用後者的樣式。錯誤的原因是:權重的進製是並不是十進位制,css 權重進製在 ie6 為 256,後來擴大到了 65536,現代瀏覽器則採用更大的數量。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110,但因為 11 個均為類選擇器,所以其實總權值最多不能超過 100, 你可以理解為 99.99,所以最終應用後者樣式。

外部樣式表和內部樣式表的優先順序由其引入順序有關,一般認為內部樣式優先順序大於外部樣式,也可以認為其相等,因為如果外部樣式放在內部樣式的後面引入,則外部樣式將覆蓋內部樣式。

內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器預設樣式
一般來說對於文字樣式的設定都會具有繼承性,例如font-familyfont-sizefont-weightcolor等等,當需要繼承樣式時,最近的祖先樣式比其他祖先樣式優先順序高。

t3

t1t2

t3

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