css樣式的優先級
2020/11/9 9:10:14 閱讀：5522
發布者：5522
多重樣式（Multiple Styles）：如果外部樣式、內部樣式和內聯樣式同時應用于同一個元素，就是使多重樣式的情況。
一般情況下，優先級如下：
（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style
<style type="text/css">
/* 內部樣式 */
h3{color:green;}
</style>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設置：h3{color:blue;} -->
選擇器的優先權
1. 內聯樣式表的權值最高 1000；
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 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 優先級法則：
A 選擇器都有一個權值，權值越大越優先；
B 當權值相等時，后出現的樣式表設置要優于先出現的樣式表設置；
C 創作者的規則高于瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高于瀏覽器所設置的樣式；
D 繼承的CSS 樣式不如后來指定的CSS 樣式；
E 在同一組屬性設置中標有“!important”規則的優先級最大；
IE 瀏覽器下載或者渲染的順序可能如下：
● IE 下載的順序是從上到下；
● JavaScript 函數的執行會阻塞IE 的下載；
● IE 渲染的順序也是從上到下；
● IE 的下載和渲染是同時進行的；
● 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（但并不是說所有相關聯的元素都已經下載完。）
● 在下載過程中，如果遇到某一標簽是嵌入文件，并且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那么此時IE的下載過程會啟用單獨連接進行下載。并且在下載后進行解析，如果JS、CSS中如有重定義，后面定義的函數將覆蓋前面定義的函數。
● 解析過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。并以此方式一直渲染下去，直到整個頁面渲染完成。
● Firefox 處理下載和渲染的順序大體相同，只是在細微之處有些差別，例如：iframe 的渲染。
