CSS樣式優先順序

2021-09-23 13:37:26 字數 1808 閱讀 8603

什麼選擇器在層疊中勝出取決於三個因素(這些都是按重量級順序排列的——前面的的一種會否決後一種):

重要性(importance)  、專用性(specificity)、源**次序(source order)

1.層疊性 

可以為乙個元素定義多個樣式,當樣式屬性不衝突時,可以同時將這些樣式應用到元素上

divdiv

div2.優先順序

如果樣式宣告衝突時,會按照樣式的優先順序來應用定義的樣式規則

由低到高:

瀏覽器預設設定       最低

內部樣式和外部樣式   中(就近原則即:原始碼次序)

內聯樣式             最高

3.調整顯示的優先順序(重要性

!important規則:

調整顯示的優先順序

將!important新增在屬性值之後,與值之間用空格隔開,就能優先使用當前樣式

ex:color:red !important;

注意: 過載這個!important宣告的唯一方法是在後面的原始碼或者是乙個擁有更高專用性的原始碼中包含相同的!important特性的宣告。

4.選擇器的優先順序(專用性)

權值:標識當前選擇器的重要程度,權值越大優先順序越高。

元素選擇器/偽元素選擇器:1

類選擇器/偽類選擇器/屬性選擇器:  10

id選擇擇器:100

內聯樣式:  1000

選擇器的權值加到一起,大的優先

權值相同,以後定義的為主(原始碼次序

選擇器千位

百位十位

個位合計值

h1000

10001

#indentifier010

00100

h1 + p::first-letter000

30003

li > a[href*="zh-cn"] > .inline-warning002

20022

沒有選擇器, 規則在乙個元素的屬性裡10

001000

注意: 通用選擇器 (*), 復合選擇器 (+,>,~, ' ') 和否定偽類 (:not) 在專用性(選擇器優先順序)中無影響。

哪些屬性預設被繼承哪些不被繼承大部分符合常識。如果你想確定,你可以參考css參考資料—— 每個單獨的屬性頁都會從乙個彙總表開始,其中包含有關該元素的各種詳細資訊,包括是否被繼承。

1.繼承性

大部分樣式可以被繼承(子元素繼承父元素的樣式特徵)

必須是有層級關係的巢狀p

2.控制繼承

css為處理繼承提供了四種特殊的通用屬性值:

注意:initialunset不被ie支援。

3.重新設定所有屬性值

css速寫屬性all能夠被應用到每乙個繼承屬性,一次性應用所有的繼承屬性。這裡的值可以是繼承屬性裡的任何乙個 (inherit,initial,unset, orrevert)。

ex:   

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