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