CSS中樣式覆蓋優先順序詳解
CSS中樣式覆蓋優先順序詳解,就跟隨本站小編一起去了解下吧,想了解更多相關資訊請持續關注我們應屆畢業生考試網!
層疊優先順序是:
瀏覽器預設 < 外部樣式表 < 內部樣式表 < 內聯樣式
其中樣式表又有:
類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器,所以完整的層疊優先順序是:
瀏覽器預設 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式...共12個優先順序
有時候在寫CSS的過程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問題,如下
程式碼如下
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
ent_block {
border: solid 2 #AE0;
}
查詢一些教材中(w3schools等),只說css的順序是“元素上的style” > “檔案頭上的style元素” >“外部樣式檔案”,但對於樣式檔案中的多個相同樣式的優先順序怎樣排列,沒有詳細說明。經過測試和繼續搜尋,得知優先順序如下排列:
1. 樣式表的元素選擇器選擇越精確,則其中的樣式優先順序越高。
id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素型別選擇器指定的樣式
所以上例中,#navigator的樣式優先順序大於ent_block的優先順序,即使ent_block是最新新增的,也不起作用。
2. 對於相同型別選擇器指定的樣式,在樣式表文件中,越靠後的.優先順序越高。
注意,這裡是樣式表文件中越靠後的優先順序越高,而不是在元素class出現的順序。比如s2 在樣式表中出現在s1之後:
程式碼如下
s1 {
color: black;
}
s2 {
color: red;
}
而某個元素指定class時採用 class=”class2 class1″這種方式指定,此時雖然class1在元素中指定時排在class2的後面,但因為在樣式表文件中class1處於class2前面,此時仍然是class2的優先順序更高,color的屬性為red,而非black。
3. 如果要讓某個樣式的優先順序變高,可以使用!important來指定。
程式碼如下
s1 {
color: black !important;
}
s2 {
color: red;
}
解決方案:
此時class將使用black,而非red。
對於一開始遇到的問題,有兩種解決方案:
1. 將border從#navigator中拿出來,放到一個class k中,而k放到ent_block之前:
程式碼如下
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
}
k {
border: solid 2 #EEE;
}
ent_block {
border: solid 2 #AE0;
}
需要預設為#navigator元素指定class=”block”
2. 使用!important:
程式碼如下
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
ent_block {
border: solid 2 #AE0 !important;
}
此時無需作任何其他改動即可生效。可見第二種方案更簡單一些。
補充一個例子
程式碼如下
<html>
<head>
<title></title>
<style type="text/css">
p { color: #00FF00 } /* 綠色 */
.a1 { color: #0000FF } /* 藍色 */
.a1 p { color: #00FFFF } /* 青色 */
.a2 { color: #FF0000 } /* 紅色 */
#a2 { color: #FFFF00 } /* 黃色 */
#a2 p { color: #FF00FF } /* 紫色 */
</style>
</head>
<body>
<p>我是綠色,內部樣式表優先於瀏覽器預設</p>
<p class="a2">我是紅色,類選擇器優先於內部樣式表</p>
<p class="a2" id="a2">我是黃色,ID選擇器優先於類選擇器</p>
<p class="a1">
<span>我是藍色,類選擇器優先於內部樣式表</span>
<p>我是青色,類派生選擇器優先於類選擇器</p>
<p class="a2">我還是青色,類派生選擇器優先於所有類選擇器</p>
<p id="a2">
<span>我是黃色,ID選擇器優先於類派生選擇器</span>
<p>我是紫色,ID派生選擇器優先於類派生選擇器</p>
<p class="a1">我還是紫色,ID派生選擇器優先於所有類選擇器</p>
<p class="a1" id="a1">我還是紫色,ID派生選擇器優先於所有ID選擇器</p>
<p class="a1" id="a1" style="color:#000000;">我是黑色,內聯樣式駕到閒雜人等退下</p>
</p>
</p>
</body>
</html>
-
php程式設計師的簡歷模板
日子如同白駒過隙,新一輪的招聘又在朝我們招手,這時一份好的簡歷可以起到很好的.作用哦。那麼如何寫簡歷才簡練、明確呢?以下是小編收集整理的php程式設計師的簡歷模板,希望能夠幫助到大家。基本簡歷姓名:黃先生國籍:中國現在所在地:廣州民族:漢族戶口所在地:潮州身材:170cm...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裡寫入DOM元素。今天這章我們就講這兩個應用(一)對html裡現有的DOM元素進行操作。我上面說了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
SQL語句型別的標準模式
1、查詢語句:主要是由select關鍵字完成2、事務控制語句:主要由commit、rollback和savepoint三個關鍵字完成3、DML(資料操作語言)語句:主要由、update和三個關鍵字完成4、DDL(資料定義語言)語句:主要由create、alter、drop和truncate四個關鍵字完成5、DCL(資料控制...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想說說javascript中函式的隱含引數:argumentsarguments該物件代表正在執行的函式和呼叫它的函式的引數。[function.]arguments[n]引數function:選項。當前正在執行的Function物件的名字。n:選項。要傳遞給Function物件的從0開始的引數值...