css樣式加載順序及覆蓋順序深入理解

2024-07-11 08:27:55

字體：大中小

供稿：網(wǎng)友

復(fù)制代碼

代碼如下:
{
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}

查找一些教材中（w3schools等），只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對(duì)于樣式文件中的多個(gè)相同樣式的優(yōu)先級(jí)怎樣排列，沒有詳細(xì)說明。經(jīng)過測試和繼續(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來指定：

復(fù)制代碼

代碼如下:
.class1 {
color: black !important;
}
.class2 {
color: red;
}

此時(shí)class將使用black，而非red。

對(duì)于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個(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í)無需作任何其他改動(dòng)即可生效?？梢姷诙N方案更簡單一些。

上一篇：將一個(gè)DIV旋轉(zhuǎn)的某一角度即90度/180度/270度及放大等問題

下一篇：div+CSS設(shè)置一行內(nèi)文字超過寬度不換行且不顯示截?cái)辔淖旨?..