css疊層 關於css層疊

2021-10-16 14:10:49 字數 1007 閱讀 8605

「確定應當向乙個元素應用哪些值時,使用者**不僅要考慮繼承,還要考慮宣告的特殊性,另外需要考慮宣告本身的**。這個過程就稱為層疊。」——《css權威指南》

特殊性內聯樣式

1,0,0,0

id0,1,0,0

類、屬性選擇、偽類

0,0,1,0

標籤、偽元素

0,0,0,1

結合符、萬用字元

0,0,0,0

1 html>body table tr[id="totals"] td ul >li/*0,0,1,7*/

2 li#answer /*0,1,0,1 (winner)*/

注:!important 是重要宣告,永遠比非重要宣告優先。

繼承大多數框模型屬性(包括外邊距、內邊距、背景和邊框)都不能繼承。

繼承的值沒有特殊性,連0特殊性(萬用字元)都沒有。

使用者**的超連結a有預設樣式不會繼承,如需修改要額外寫乙個a:link覆蓋原有藍色。

demo

1 3 #page

4 1 this is central line.

注:這個demo也說明了不加區別地使用通配選擇器會引發的繼承問題。

權重和**

5級宣告權重由大到小順序依次為:

讀者的重要宣告

創作人員的重要宣告

創作人員的正常宣告

讀者的正常宣告

使用者**宣告

如果兩個規則的權重、**和特殊性完全相同,那麼後寫的勝出。文件中包含的規則權重高於匯入的規則(@import)。

由此,推薦鏈結樣式排序為lvha(:link,:visited,:hover,:active)。當為同乙個屬性設定樣式(如color),以ahlv的順序編寫就不會有懸停和響應的效果,因為鏈結會先找到:link而直接忽視ah。當然,如果使用組合偽類(:visited:hover)就不用擔心這個問題。

層疊規則

**》特殊性》宣告順序(主樣式表》匯入樣式表)>繼承

參考資料

《css權威指南》第3章 結構與層疊

css疊層 什麼是css層疊?

層疊是css的乙個基本特徵,它是乙個定義了如何合併來自多個源的屬性值的演算法。它在css處於核心地位,css的全稱層疊樣式表正是強調了這一點。css層疊性是指css樣式在針對同一元素配置同一屬性時,依據層疊規則 權重 來處理衝突,選擇應用權重高的css選擇器所指定的屬性,一般也被描述為權重高的覆蓋權...

CSS學習(2)層疊cascade

使用了 important的使用者樣式表 使用了 important的設計者樣式表 設計者樣式表 使用者樣式表 瀏覽器 使用者預設的樣式表 樣式表中樣式規則的次序由選擇符selector的特殊性specificity確定。選擇符selector的特殊性定義如下。一般情況下,規則的特殊性遵照如下規律 ...

CSS中層疊和CSS的7階層疊水平

今天搜尋資料時,忽然發現了以前沒注意的乙個知識點,所以拖過來搞一搞,這個知識點叫做css的7階層疊水平 在說這個知識之前,我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇,僅僅講z index 基本含義 z index通俗來說就是在z軸上的...