css樣式加載順序及覆蓋順序深入理解
發(fā)布時間：2013-12-19 16:00:35 作者：佚名 
我要評論
我要評論很多的新手朋友們對css樣式加載順序和覆蓋順序的理解有所偏差，下面用示例為大家詳細(xì)的介紹下，感興趣的朋友不要錯過
復(fù)制代碼
代碼如下:{
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
查找一些教材中（w3schools等），只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優(yōu)先級怎樣排列，沒有詳細(xì)說明。經(jīng)過測試和繼續(xù)搜索，得知優(yōu)先級如下排列：
1. 樣式表的元素選擇器選擇越精確，則其中的樣式優(yōu)先級越高：
id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
所以上例中，#navigator的樣式優(yōu)先級大于.current_block的優(yōu)先級，即使.current_block是最新添加的，也不起作用。
2. 對于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優(yōu)先級越高
注意，這里是樣式表文件中越靠后的優(yōu)先級越高，而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后：
復(fù)制代碼
代碼如下:.class1 {
color: black;
}
.class2 {
color: red;
}
而某個元素指定class時采用 class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優(yōu)先級更高，color的屬性為red，而非black。
3. 如果要讓某個樣式的優(yōu)先級變高，可以使用!important來指定：
復(fù)制代碼
代碼如下:.class1 {
color: black !important;
}
.class2 {
color: red;
}
此時class將使用black，而非red。
對于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個class .block中，而.block放到.current_block之前：
復(fù)制代碼
代碼如下:#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
}
.block {
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
需要默認(rèn)為#navigator元素指定class="block"
2. 使用!important:
復(fù)制代碼
代碼如下:#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0 !important;
}
此時無需作任何其他改動即可生效。可見第二種方案更簡單一些。
相關(guān)文章
- 下面小編就為大家?guī)硪黄狢SS樣式覆蓋規(guī)則全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-05
- 這篇文章主要介紹了css文件中的樣式類被覆蓋，js文件中的變量未定義問題的相關(guān)資料,需要的朋友可以參考下2016-04-27
- 對同一個標(biāo)簽設(shè)置多個相同屬性，但是值不一樣，結(jié)果會是怎樣呢？到底是誰覆蓋了誰，下面為大家詳細(xì)解讀，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-18
CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級及樣式覆蓋問題探討
多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況.有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則2013-02-01- 在頁面中，我們常用id、class以及內(nèi)聯(lián)樣式表來設(shè)置我們的組件CSS，在網(wǎng)頁中css樣式根據(jù)css優(yōu)先級來使用，優(yōu)先級高的會覆蓋優(yōu)先級低的css樣式，本文通過實例代碼給大家詳細(xì)2023-01-03