WEB前端--CSS樣式優先順序
樣式的優先順序
多重樣式（Multiple Styles）：如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況。
一般情況下，優先順序如下：
（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style
有個例外的情況，就是如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。
示例如下：
| <head> |
| <style type="text/css"> |
| /* 內部樣式 */ |
| h3{color:green;} |
| </style> |
| <!-- 外部樣式 style.css --> |
| <link rel="stylesheet" type="text/css" href="style.css"/> |
| <!-- 設定：h3{color:blue;} --> |
| </head> |
| <body> |
| <h3>測試！</h3> |
| </body> |
選擇器的優先權
解釋：
1. 內聯樣式表的權值最高 1000；
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 10
4. HTML 標籤選擇器的權值為 1
利用選擇器的權值進行計算比較，示例如下：
| <html> |
| <head> |
| <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> |
| </head> |
| <body> |
| <div id="redP"> |
| <p class="red">red |
| <span><em>em red</em></span> |
| </p> |
| <p>red</p> |
| </div> |
| </body> |
| </html> |
結果：<em> 標籤內的資料顯示為藍色。
CSS 優先順序法則：
A 選擇器都有一個權值，權值越大越優先；
B 當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
C 創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；
D 繼承的CSS 樣式不如後來指定的CSS 樣式；
E 在同一組屬性設定中標有“!important”規則的優先順序最大；示例如下：
| <html> |
| <head> |
| <style type="text/css"> |
| #redP p{ |
| /*兩個color屬性在同一組*/ |
| color:#00f !important; /* 優先順序最大 */ |
| color:#f00; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="redP"> |
| <p>color</p> |
| <p>color</p> |
| </div> |
| </body> </html> |
結果：在Firefox 下顯示為藍色；在IE 6 下顯示為紅色；
使用指令碼新增樣式
當在連線外部樣式後，再在其後面使用JavaScript 指令碼插入內部樣式時（即內部樣式使用指令碼建立），IE 瀏覽器就表現出它的另類了。程式碼如下：
| <html> |
| <head> |
| <title> demo </title> |
| <meta name="Author" content="xugang" /> |
| <!-- 新增外部CSS 樣式 --> |
| <link rel="stylesheet" href="styles.css" type="text/css" /> |
| <!-- 在外部的styles.css檔案中，程式碼如下： |
| h3 {color:blue;} |
| --> |
| <!-- 使用javascript 建立內部CSS 樣式 --> |
| <script type="text/javascript"> |
| <!-- |
| (function(){ |
| var agent = window.navigator.userAgent.toLowerCase(); |
| var is_op = (agent.indexOf("opera") != -1); |
| var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op; |
| var is_ch = (agent.indexOf("chrome") != -1); |
| var cssStr="h3 {color:green;}"; |
| var s=document.createElement("style"); |
| var head=document.getElementsByTagName("head").item(0); |
| var link=document.getElementsByTagName("link"); |
| link=link.item(0); |
| if(is_ie) |
| { |
| if(link) |
| head.insertBefore(s,link); |
| else |
| head.appendChild(s); |
| document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; |
| } |
| else if(is_ch) |
| { |
| var t=document.createTextNode(); |
| t.nodeValue=cssStr; |
| s.appendChild(t); |
| head.insertBefore(s,link); |
| } |
| else |
| { |
| s.innerHTML=cssStr; |
| head.insertBefore(s,link); |
| } |
| })(); |
| //--> |
| </script> |
| </head> |
| <body> |
| <h3>在IE中我是綠色，非IE瀏覽器下我是藍色！</h3> |
| </body> |
| </html> |
結果：在Firefox / Chrome / Safari / Opera 中，文字都是藍色的。而在IE 瀏覽器中，文字卻是綠色的。
附加
在IE 中新增樣式內容的JavaScript 程式碼：
| var s=document.createElement("style"); |
| var head=document.getElementsByTagName("head").item(0); |
| var link=document.getElementsByTagName("link").item(0); |
| head.insertBefore(s,link); |
| /* 注意：在IE 中， |
| 雖然程式碼是將<style>插入在<link>之前， |
| 但實際記憶體中，<style>卻在<link>之後。 |
| 這也是“IE中奇怪的應用CSS的BUG”之所在！ |
| */ |
| var oStyleSheet = document.styleSheets[0]; |
| //這實際是在<link>的外部樣式中追加 |
| oStyleSheet.addRule("h3","color:green;"); |
| alert(oStyleSheet.rules[0].style.cssText); |
| alert(document.styleSheets[0].rules[0].style.cssText); |
| //方式2 |
| var cssStr="h3 {color:green;}"; |
| document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; |
IE 瀏覽器下載或者渲染的順序可能如下：
● IE 下載的順序是從上到下；
● JavaScript 函式的執行會阻塞IE 的下載；
● IE 渲染的順序也是從上到下；
● IE 的下載和渲染是同時進行的；
● 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（但並不是說所有相關聯的元素都已經下載完。）
● 在下載過程中，如果遇到某一標籤是嵌入檔案，並且檔案是具有語義解釋性的（例如：JS指令碼，CSS樣式），那麼此時IE的下載過程會啟用單獨連線進行下載。並且在下載後進行解析，如果JS、CSS中如有重定義，後面定義的函式將覆蓋前面定義的函式。
● 解析過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。並以此方式一直渲染下去，直到整個頁面渲染完成。
● Firefox 處理下載和渲染的順序大體相同，只是在細微之處有些差別，例如：iframe 的渲染。