CSS選擇器優先級

瀏覽器是通過判斷CSS優先級，來決定到底哪些屬性值是與元素最為相關的，從而作用到該元素上。CSS選擇器的合理組成規則決定了優先級，我們也常常用選擇器優先級來合理控製元素達到我們理想的顯示狀態，下面我們來具體了解下CSS選擇器優先級及權重。

CSS選擇器如何計算？

CSS優先級順序

下列是一份優先級逐級增加的選擇器列表：

多重樣式（Multiple Styles）

如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況。

一般情況下，優先級為：（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style

有個例外的情況，就是如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。

示例如下：

  1. <head>
  2.    <style type="text/css">
  3.      h3{color:green;}
  4.    </style>
  5.     <!-- 外部樣式 style.css -->
  6.    <link rel="stylesheet"type="text/css"href="style.css"/>
  7.     <!-- 設置：h3{color:blue} -->
  8. </head>
  9. <body>
  10.     <h3>welcome sojson.com</h3>
  11. </body>

選擇器的優先權解釋說明

  1. 內聯樣式表的權值最高 1000。

  2. ID 選擇器的權值為 100。

  3. Class 類選擇器的權值為 10。

  4. HTML 標簽（類型）選擇器的權值為 1。

  1. <html>
  2.   <head>
  3.    <style type="text/css">
  4.       #redP p {
  5.           color:#F00;
  6.       }
  7.       #redP .red em {
  8.           color:#00F;
  9.       }
  10.       #redP p span em {
  11.           color:#FF0;
  12.       }
  13.    </style>
  14.   </head>
  15.   <body>
  16.      <divid="redP">
  17.         <pclass="red">red
  18.           <span><em>em red</em></span>
  19.        </p>
  20.         <p>red</p>
  21.      </div>
  22.   </body>
  23. </html>

CSS 優先級規則：

  1. 選擇器都有一個權值，權值越大越優先。

  2. 當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置。

  3. 創作者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式。

  4. 繼承的CSS 樣式不如後來指定的CSS 樣式

  5. 在同一組屬性設置中標有「!important」規則的優先級最大。

CSS !important 規則實例：
  1. <html>
  2.  <head>
  3.    <style type="text/css">
  4.     #redP p{
  5.        color:#00f !important;
  6.        color:#f00;
  7.     }
  8.    </style>
  9.  </head>
  10.  <body>
  11.     <divid="redP">
  12.       <p>color</p>
  13.       <p>color</p>
  14.     </div>
  15.  </body>
  16. </html>

使用腳本添加樣式：

當在連接外部樣式後，再在其後面使用JavaScript腳本插入內部樣式時（即內部樣式使用腳本創建），IE 瀏覽器就表現出它的另類了。代碼如下：

  1.  
  2. <html>
  3. <head>
  4.   <title> demo </title>
  5.   <metaname="Author"content="xugang" />
  6.   <!-- 添加外部CSS 樣式 -->
  7.   <linkrel="stylesheet"href="styles.css"type="text/css" />
  8.   <!-- 在外部的styles.css文件中，代碼如下：
  9.        h3 {color:blue}
  10.   -->
  11.   <!-- 使用javascript 創建內部CSS 樣式 -->
  12.   <script type="text/javascript">
  13.   <!--
  14.    (function(){
  15.       var agent = window.navigator.userAgent.toLowerCase();
  16.       var is_op = (agent.indexOf("opera") != -1);
  17.       var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
  18.       var is_ch = (agent.indexOf("chrome") != -1);
  19.  
  20.       var cssStr="h3 {color:green;}";
  21.       var s=document.createElement("style");
  22.       var head=document.getElementsByTagName("head").item(0);
  23.       var link=document.getElementsByTagName("link");
  24.       link=link.item(0);
  25.  
  26.       if(is_ie)
  27.       {
  28.          if(link)
  29.             head.insertBefore(s,link);
  30.          else
  31.             head.appendChild(s);
  32.          document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
  33.       }
  34.       else if(is_ch)
  35.       {
  36.          var t=document.createTextNode();
  37.          t.nodeValue=cssStr;
  38.          s.appendChild(t);
  39.          head.insertBefore(s,link);
  40.       }
  41.       else
  42.       {
  43.          s.innerHTML=cssStr;
  44.          head.insertBefore(s,link);
  45.       }
  46.    })();
  47.   //-->
  48.   </script>
  49. </head>
  50. <body>
  51.   <h3>在IE中我是綠色，非IE瀏覽器下我是藍色！</h3>
  52. </body>
  53. </html>

IE 瀏覽器下CSS渲染的順序可能如下

  1. IE 下載的順序是從上到下；

  2. JavaScript 函數的執行會阻塞IE 的下載；

  3. IE 渲染的順序也是從上到下；

  4. IE 的下載和渲染是同時進行的；

  5. 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（但並不是說所有相關聯的元素都已經下載完。）

  6. 在下載過程中，如果遇到某一標簽是嵌入文件，並且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那麽此時IE的下載過程會啟用單獨連接進行下載。並且在下載後進行解析，如果JS、CSS中如有重定義，後面定義的函數將覆蓋前面定義的函數。

  7. 解析過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。並以此方式一直渲染下去，直到整個頁面渲染完成。

  8. Firefox 處理下載和渲染的順序大體相同，只是在細微之處有些差別，例如：iframe 的渲染。