css樣式加載順序及覆蓋順序是怎樣的

css樣式加載順序及覆蓋順序是怎樣的，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

代碼如下:

{
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之后：

代碼如下:

.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)指定：

代碼如下:

.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之前：

代碼如下:

#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:

代碼如下:

#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)于css樣式加載順序及覆蓋順序是怎樣的問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。