CSS層疊優先順序

2022-08-29 02:30:13 字數 3053 閱讀 4867

內容提要: 如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出。它可能不像其它那麼重要,大部分案例你不需要擔心衝突,但大型而且複雜的css檔案,或有很多css檔案組成的,可能產生衝突。

如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出。

它可能不像其它那麼重要,大部分案例你不需要擔心衝突,但大型而且複雜的css檔案,或有很多css檔案組成的,可能產生衝突。

選擇器一樣的情況下後面的會覆蓋前面的屬性。比如:

p p

p元素的元素將是藍色,因為遵循後面的規則。

然而,你不可能經常用相同的選擇器衝突達到目的,當你使用巢狀選擇器,合理的衝突來了。比如:

div p

p 也許你看起來p元素在div元素裡面的顏色是藍色,就像後面p元素的規則,但是第乙個選擇器的特性卻是紅色。基本上,乙個選擇器越多特性,樣式衝突的時候將顯示它的樣式。

一組巢狀選擇器的實際特性可以計算出來。基本的,使用id選擇器的值是100,使用class選擇器的值是10,每個html選擇器的值是1。它們加起來就可以計算出特性的值。

p的特性是1(乙個html選擇器)

div p的特性是2(兩個html選擇器)

.tree的特性是10(1個class選擇器)

div p.tree的特性是1+1+10=12,(兩個html選擇器,乙個class選擇器)

#baobab的特性是100(1個id選擇器)

body #content .alternative p的特性是112(兩個html選擇器,乙個id選擇器,乙個類選擇器)

按照上面的規則,div p.tree的特性比div p高,body #content .alternative p又比它們兩個都高。

css優先順序的四大原則:寫點我自己的總結:

原則一: 繼承不如指定

如果某樣式是繼承來的永遠不如具體指定的優先順序高。

例子1:

code:

我是多大字型大小?

執行結果:.class3

例子2:

code:

我是多大字型大小?

執行結果:.class3

注意:後面的幾大原則都是建立在「指定」的基礎上的。

原則二: #id >.class >標籤選擇符

例子:code:

我是多大字型大小?

執行結果:#id3

原則三:越具體越強大。

解釋:當對某個元素的css選擇符樣式定義的越具體,層級越明確,該定義的優先順序就越高。

code:

我是多大字型大小?

執行結果:.class1 .class2 .class3

原則四:標籤#id >#id ; 標籤.class >.class

上面這條原則大家應該也都知道,看例子

code:

我是多大字型大小?

我是多大字型大小?

執行結果:span#id3 | span.class3

很多人會有這樣的疑問,為什麼不把這個原則四歸入原則一形成:

【 標籤#id >#id >標籤.class >.class >標籤選擇符 >萬用字元 】 呢?或者將 「標籤.class」 看作多更為具體的 「.class」 從而歸入原則二呢?後面我將解答各位的疑惑,這就涉及到css的解析規律———這四大原則間也是有優先順序的,是不是有些糊塗了?別急,繼續 看。

*四大原則的權重

相信很多人都知道上面的四大原則,不要以為知道了這四大原則就能分辨css中那條**是起作用的,不信?那你5秒內能肯定的知道下面這段**,測試中的文字的字型大小嗎?

code:

我是多大字型大小?

四大原則的權重就是: 原則一 >原則二 >原則三 >原則四

解釋:首先遵循原則一

有指定開始使用下面的原則,無指定則繼承離他最近的定義。

然後開始原則二

1、比較最高優先順序的選擇符

例子:code:

我是多大字型大小?

執行結果:#id3

刪掉上面css中的前兩行可以得出,如果沒有最高端別的#id會尋找.class 即使後面的css按照「原則二」 描述的再具體也無法突破原則一。

2、如果兩條css的如果最高選擇符優先順序一樣,則比較他們的數量

例子:code:

我是多大字型大小?

執行結果:.class1 .class2 #id3

3、如果最高選擇符級別和數量都一樣,則按照原則二比較他們下一級,以此類推。

例子1:

code:

我是多大字型大小?

[color=orange]

執行結果:#id1 .class2 .class3

[/color]

*最高端選擇符的位置沒有高下之分,論證:[code]code:

我是多大字型大小?

上例中更換3條css的先後可以得出,哪條位於最後,哪條起作用。說明他們的級別一樣,後面的將覆蓋前面的。

*將原則四歸入原則二的不合理性,論證:

code:

我是多大字型大小?

#id1 .class2 .class3

可以看到span#id3並不比#id1高出乙個級別。

無結果開始原則三

如果比較結果,選擇符從最高端開始都對應,級別上的數量也相同,則開始比較誰更具體。

例子:code:

我是多大字型大小?

#id1 .class2 span

當然也可以理解為在原則二層層比較中「少乙個層級的樣式」,缺少的那個層級沒有「層級較多的樣式」多出的那個層級的級別高。(繞口令)

*將原則四歸入原則三的不合理性,論證:

code:

我是多大字型大小?

上例中可以看出,如果將原則四併入原則三,將span.class3看作兩層,那麼應該和.class2 .class3層級一樣多,那麼應該顯示12px,而事實不是這樣。

最終對決原則四

如果還分不出結果,則開始原則四的比較:

例子1:

code:

我是多大字型大小?

.class1 p.class2 .class3

先看是否描述到該元素,再看最高端別的等級和數量(#id>class,html#id>#id),同級級別&數量一致時,再看下一級屬性。

CSS層疊(優先順序)

層疊樣式表css最基本的乙個特性就是層疊。衝突的宣告通過層疊進行排序,由此確定最終的文件表示。而這個過程的核心就是選擇器及其相關宣告的特殊性 重要性 及繼承機制。本文將詳細介紹css層疊 選擇器的特殊性由選擇器本身的元件確定。特殊性值表述為4個部分 如 0,0,0,0 下面來介紹不同的選擇器的特殊性...

css 繼承,層疊,優先順序

1,繼承,父親黃種人,孩子也為黃種人 兒子繼承父親 父親為 color red 子元素,也為color red 子元素不要勞作就有了,子元素什麼有沒有做,我就有了父元素的值 2,但是 width,不叫繼承,叫可以獲取 子元素可以獲取父親的width 父親寬度為100px。子元素不寫寬度,那麼,照樣沒...

CSS 元素層疊優先順序原則

1 static元素之間按html結構順序確定優先順序,元素出現的越晚,優先順序就越高 2 設定position的值為非static值 relative absolute fixed 則元素的優先順序會高於static元素 3 設定position的值為非static值 relative absol...