當建立的樣式表越來越複雜時,乙個標籤的樣式將會受到越來越多的影響,這種影響可能來自周圍的標籤,也可能來自其自身。下面我們從這兩方面去看看 css 樣式的優先順序。
css 的繼承特性指的是應用在乙個標籤上的那些 css 屬性被傳到其子標籤上。看下面的 html 結構:
如果
有個屬性color: red
,則這個屬性將被
繼承,即
也擁有屬性color: red
。
由上可見,當網頁比較複雜, html 結構巢狀較深時,乙個標籤的樣式將深受其祖先標籤樣式的影響。影響的規則是:
css 優先規則1:最近的祖先樣式比其他祖先樣式優先順序高。
例1:
如果我們把乙個標籤從祖先那裡繼承來的而自身沒有的屬性叫做「祖先樣式」,那麼「直接樣式」就是乙個標籤直接擁有的屬性。又有如下規則:
css 優先規則2:「直接樣式」比「祖先樣式」優先順序高。
例2:
上面討論了乙個標籤從祖先繼承來的屬性,現在討論標籤自有的屬性。在討論 css 優先順序之前,先說說 css 7 種基礎的選擇器:
css 優先規則3:優先順序關係:內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器
例3:
所有 css 的選擇符由上述 7 種基礎的選擇器或者組合而成,組合的方式有 3 種:// html
// css
#content-id
.content-class
div
最終的 color 為 black,因為內聯樣式比其他選擇器的優先順序高。
當乙個標籤同時被多個選擇符選中,我們便需要確定這些選擇符的優先順序。我們有如下規則:
css 優先規則4:計算選擇符中 id 選擇器的個數(a),計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和(b),計算選擇符中標籤選擇器和偽元素選擇器的個數之和(c)。按 a、b、c 的順序依次比較大小,大的則優先順序高,相等則比較下乙個。若最後兩個的選擇符中 a、b、c 都相等,則按照「就近原則」來判斷。
例4:
如果外部樣式表和內部樣式表中的樣式發生衝突會出現什麼情況呢?這與樣式表在 html 檔案中所處的位置有關。樣式被應用的位置越在下面則優先順序越高,其實這仍然可以用規則 4 來解釋。// html
// css
#con-id span
div .con-span
由規則 4 可見,的 color 為 red。
例5:
上面**中,// html
// style-link.css
div
// style-import.css
div
從順序上看,內部樣式在最下面,被最晚引用,所以 的背景色為 blue。
@import
語句必須出現在內部樣式之前,否則檔案引入無效。當然不推薦使用@import
的方式引用外部樣式檔案,原因見另一篇部落格:css 引入方式。
css 還提供了一種可以完全忽略以上規則的方法,當你一定、必須確保某乙個特定的屬性要顯示時,可以使用這個技術。
css 優先規則5:屬性後插有!important
的屬性擁有最高優先順序。若同時插有!important
,則再利用規則 3、4 判斷優先順序。
例6:
在學習過程中,你可能發現給選擇器加權值的說法,即 id 選擇器權值為 100,類選擇器權值為 10,標籤選擇器權值為 1,當乙個選擇器由多個 id 選擇器、類選擇器或標籤選擇器組成時,則將所有權值相加,然後再比較權值。這種說法其實是有問題的。比如乙個由 11 個類選擇器組成的選擇器和乙個由 1 個 id 選擇器組成的選擇器指向同乙個標籤,按理說 110 > 100,應該應用前者的樣式,然而事實是應用後者的樣式。錯誤的原因是:選擇器的權值不能進製。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110,但因為 11 個均為類選擇器,所以其實總權值最多不能超過 100, 你可以理解為 99.99,所以最終應用後者樣式。// html
// css
p .father .son
雖然 .father .son 擁有更高的權值,但選擇器 p 中的 background 屬性被插入了 !important,
所以 的 background 為 red。
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...