css樣式的優(yōu)先級
2020/11/9 9:10:14 閱讀:7720
發(fā)布者:7720
多重樣式(Multiple Styles):如果外部樣式、內部樣式和內聯(lián)樣式同時(shí)應用于同一個(gè)元素,就是使多重樣式的情況。
一般情況下,優(yōu)先級如下:
(外部樣式)External style sheet <(內部樣式)Internal style sheet <(內聯(lián)樣式)Inline style
<style type="text/css">
/* 內部樣式 */
h3{color:green;}
</style>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設置:h3{color:blue;} -->
選擇器的優(yōu)先權
1. 內聯(lián)樣式表的權值最高 1000;
2. ID 選擇器的權值為 100
3. Class 類(lèi)選擇器的權值為 10
4. HTML 標簽選擇器的權值為 1
<style type="text/css">
#redP p {
/* 權值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權值 = 100+10+1=111 */
color:#00F; /* 藍色 */
}
#redP p span em {
/* 權值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
標簽內的數據顯示為藍色。
CSS 優(yōu)先級法則:
A 選擇器都有一個(gè)權值,權值越大越優(yōu)先;
B 當權值相等時(shí),后出現的樣式表設置要優(yōu)于先出現的樣式表設置;
C 創(chuàng )作者的規則高于瀏覽者:即網(wǎng)頁(yè)編寫(xiě)者設置的CSS 樣式的優(yōu)先權高于瀏覽器所設置的樣式;
D 繼承的CSS 樣式不如后來(lái)指定的CSS 樣式;
E 在同一組屬性設置中標有“!important”規則的優(yōu)先級最大;
IE 瀏覽器下載或者渲染的順序可能如下:
● IE 下載的順序是從上到下;
● JavaScript 函數的執行會(huì )阻塞IE 的下載;
● IE 渲染的順序也是從上到下;
● IE 的下載和渲染是同時(shí)進(jìn)行的;
● 在渲染到頁(yè)面的某一部分時(shí),其上面的所有部分都已經(jīng)下載完成(但并不是說(shuō)所有相關(guān)聯(lián)的元素都已經(jīng)下載完。)
● 在下載過(guò)程中,如果遇到某一標簽是嵌入文件,并且文件是具有語(yǔ)義解釋性的(例如:JS腳本,CSS樣式),那么此時(shí)IE的下載過(guò)程會(huì )啟用單獨連接進(jìn)行下載。并且在下載后進(jìn)行解析,如果JS、CSS中如有重定義,后面定義的函數將覆蓋前面定義的函數。
● 解析過(guò)程中,停止頁(yè)面所有往下元素的下載。樣式表文件比較特殊,在其下載完成后,將和以前下載的所有樣式表一起進(jìn)行解析,解析完成后,將對此前所有元素(含以前已經(jīng)渲染的)重新進(jìn)行樣式渲染。并以此方式一直渲染下去,直到整個(gè)頁(yè)面渲染完成。
● Firefox 處理下載和渲染的順序大體相同,只是在細微之處有些差別,例如:iframe 的渲染。