<object id="oakae"></object><object id="oakae"></object>
<bdo id="oakae"><label id="oakae"></label></bdo>
<code id="oakae"><samp id="oakae"></samp></code>
  • <code id="oakae"></code><input id="oakae"><label id="oakae"></label></input><bdo id="oakae"><samp id="oakae"></samp></bdo>

    JSON在線解析

    CSS選擇器優先級

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

    CSS選擇器如何計算?

    1. 當CSS選擇器權重相同,則最后的聲明的CSS選擇器覆蓋靠前的 CSS。

    2. CSS優先級是根據由每種選擇器類型構成的級聯字串計算而成的,它不是一個對應相應匹配表達式的權重值。

    3. 相同CSS表達式,在DOM結構中的距離是不會對元素優先級計算產生影響的。

    CSS優先級順序

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

    1. 通用選擇器

    2. 元素(類型)選擇器

    3. 類選擇器

    4. 屬性選擇器

    5. 偽類

    6. ID 選擇器

    7. 內聯樣式


    多重樣式(Multiple Styles

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

    一般情況下,優先級為:(外部樣式)External style sheet <(內部樣式)Internal style sheet <(內聯樣式)Inline style

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

    示例如下:

    <head>
       <style type="text/css">
         
         h3{color:green;}
       </style>
     
       <!-- 外部樣式 style.css -->
       <linkrel="stylesheet"type="text/css"href="style.css"/>
       <!-- 設置:h3{color:blue} -->
    </head>
    <body>
        <h3>welcome sojson.com</h3>
    </body>

    結果:點擊我看上面的結果


    選擇器的優先權

    選擇器優先權

    選擇器的優先權解釋說明

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

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

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

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

    選擇器的權值進行計算比較,結果如下:

    <html>
      <head>
       <style type="text/css">
          #redP p {
              
              color:#F00;  
          }
     
          #redP .red em {
              
              color:#00F; 
     
          }
     
          #redP p span em {
              
              color:#FF0;
          }
       </style>
      </head>
      <body>
         <divid="redP">
            <pclass="red">red
              <span><em>em red</em></span>
           </p>
            <p>red</p>
         </div>
      </body>
    </html>

    結果:<em> 標簽內的數據顯示為藍色:點擊我看上面的結果


    CSS 優先級規則:

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

    2. 當權值相等時,后出現的樣式表設置要優于先出現的樣式表設置。

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

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

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

    CSS !important 規則實例:
    <html>
     <head>
       <style type="text/css">
        #redP p{
           
           color:#00f !important; 
           color:#f00;
        }
       </style>
     </head>
     <body>
        <divid="redP">
          <p>color</p>
          <p>color</p>
        </div>
     </body>
    </html>

    結果:在Firefox 下顯示為藍色;在IE6 下顯示為紅色點擊我看上面的結果


    使用腳本添加樣式:

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

    <html>
    <head>
      <title> demo </title>
      <metaname="Author"content="xugang" />
     
      <!-- 添加外部CSS 樣式 -->
      <linkrel="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 瀏覽器下CSS渲染的順序可能如下

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

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

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

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

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

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

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

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

    聲明

    當前資源,是在網絡資源中優化,以及整理和排版,部分真實性已經校驗,因為涉及到瀏覽器的版本一直在升級,故請同學點擊測試結果對應查看結果并參考。

    工具導航地圖

    甘肃11选5软件