CSS樣式優先順序

2021-07-05 00:00:06 字數 1101 閱讀 6663

css樣式分為內聯樣式和外部樣式,一般情況下:內聯樣式的優先順序大於外部樣式。即style樣式》id選擇器》class選擇器》元素選擇器。

例如:

.on

.person-num>li

當對li標籤新增上面兩個樣式時,.on樣式中重複的內容是不會生效的。因為.on樣式的優先順序值小於li,它會被li樣式覆蓋。但是有些時候我們需要讓自定義的樣式始終生效,那麼可以使用!important標識。但建議輕易不要使用。

優先順序順序:!important>style>id>偽類》屬性選擇器》class>tag>宣告先後順序》全域性選擇器

偽類、屬性選擇器、class本為同一級別的優先順序,主要區別在其他順序上。

!important的意思是我是最重要的,其他樣式都不能代替。

例如:

line-height:20px!important;
當選擇器相同時,根據宣告先後順序確定優先順序。

優先順序計算:(可理解為2進製**)

style:1,0,0,0

id:0,1,0,0

class:0,0,1,0

tag:0,0,0,1

計算原則:

1.遵循單一樣式的優先順序

2.標籤  #id>#id;  

標籤  .class>.class

3.越具體,值越大,值越大,越優先

4.相同的樣式型別,值加1

例如:

.h1

div .h1

div #id .h1

div #id #ip .h1

子選擇器

子選擇器僅指直接後代,用》來進行選擇,通常所說的後代選擇器則是所有後代,包含孫子、從孫等後代,用空格進行選擇。

例如:

#muen .towmuen li
選擇twomuen樣式下所有的li標籤。

#muen .towmuen>li
選擇twomuen樣式下的第一代li標籤。

css樣式優先順序

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

css樣式優先順序

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

CSS 樣式優先順序

在html css的學習中 當乙個標籤有多種樣式時 它該如何選擇呢 我總結了一下 可以根據以下方法按照1.2.3.先後順序 來判斷css 樣式的優先順序 important 的屬性擁有最高優先順序。important 用法 寫於屬性分號前面,多項亦是如此 p a id 選擇器 100 b 類選擇器 ...