久久天天躁狠狠躁夜夜免费观看,精品国产粉嫩内射白浆内射双马尾,久久国产欧美日韩精品,久久久久久性高,激情欧美成人久久综合

首頁 CSS優(yōu)先級(jí)
更新時(shí)間：2023-09-13 14:38:35

CSS選擇器優(yōu)先級(jí)

瀏覽器是通過判斷CSS優(yōu)先級(jí)，來決定到底哪些屬性值是與元素最為相關(guān)的，從而作用到該元素上。CSS選擇器的合理組成規(guī)則決定了優(yōu)先級(jí)，我們也常常用選擇器優(yōu)先級(jí)來合理控制元素達(dá)到我們理想的顯示狀態(tài)，下面我們來具體了解下CSS選擇器優(yōu)先級(jí)及權(quán)重。

CSS選擇器如何計(jì)算？

  • 當(dāng)CSS選擇器權(quán)重相同，則最后的聲明的CSS選擇器覆蓋靠前的 CSS。

  • CSS優(yōu)先級(jí)是根據(jù)由每種選擇器類型構(gòu)成的級(jí)聯(lián)字串計(jì)算而成的，它不是一個(gè)對(duì)應(yīng)相應(yīng)匹配表達(dá)式的權(quán)重值。

  • 相同CSS表達(dá)式，在DOM結(jié)構(gòu)中的距離是不會(huì)對(duì)元素優(yōu)先級(jí)計(jì)算產(chǎn)生影響的。

CSS優(yōu)先級(jí)順序

下列是一份優(yōu)先級(jí)逐級(jí)增加的選擇器列表：

  • 通用選擇器

  • 元素（類型）選擇器

  • 類選擇器

  • 屬性選擇器

  • 偽類

  • ID 選擇器

  • 內(nèi)聯(lián)樣式

多重樣式（Multiple Styles）

如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況。

一般情況下，優(yōu)先級(jí)為：（外部樣式）External style sheet <（內(nèi)部樣式）Internal style sheet <（內(nèi)聯(lián)樣式）Inline style

有個(gè)例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。

示例如下：

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

結(jié)果：點(diǎn)擊我看上面的結(jié)果

選擇器的優(yōu)先權(quán)

選擇器優(yōu)先權(quán)

選擇器的優(yōu)先權(quán)解釋說明

  1. 內(nèi)聯(lián)樣式表的權(quán)值最高 1000。

  2. ID 選擇器的權(quán)值為 100。

  3. Class 類選擇器的權(quán)值為 10。

  4. HTML 標(biāo)簽（類型）選擇器的權(quán)值為 1。

選擇器的權(quán)值進(jìn)行計(jì)算比較，結(jié)果如下：

<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>

結(jié)果：<em> 標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色：點(diǎn)擊我看上面的結(jié)果

CSS 優(yōu)先級(jí)規(guī)則：

  1. 選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先。

  2. 當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置。

  3. 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式。

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

  5. 在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級(jí)最大。

CSS !important 規(guī)則實(shí)例：
<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>

結(jié)果：在Firefox 下顯示為藍(lán)色；在IE6 下顯示為紅色：點(diǎn)擊我看上面的結(jié)果


使用腳本添加樣式：

當(dāng)在連接外部樣式后，再在其后面使用JavaScript腳本插入內(nèi)部樣式時(shí)（即內(nèi)部樣式使用腳本創(chuàng)建），IE 瀏覽器就表現(xiàn)出它的另類了。代碼如下：


<html>
<head>
  <title> demo </title>
  <metaname="Author"content="xugang" />
  <!-- 添加外部CSS 樣式 -->
  <linkrel="stylesheet"href="styles.css"type="text/css" />
  <!-- 在外部的styles.css文件中，代碼如下：
       h3 {color:blue}
  -->
  <!-- 使用javascript 創(chuàng)建內(nèi)部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瀏覽器下我是藍(lán)色！</h3>
</body>
</html>

結(jié)果：在Firefox / Chrome / Safari / Opera 中，文字都是藍(lán)色的。而在IE 瀏覽器中，文字卻是綠色的。 ：點(diǎn)擊我看上面的結(jié)果

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

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

  2. JavaScript 函數(shù)的執(zhí)行會(huì)阻塞IE 的下載；

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

  4. IE 的下載和渲染是同時(shí)進(jìn)行的；

  5. 在渲染到頁面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（但并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完。）

  6. 在下載過程中，如果遇到某一標(biāo)簽是嵌入文件，并且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那么此時(shí)IE的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載。并且在下載后進(jìn)行解析，如果JS、CSS中如有重定義，后面定義的函數(shù)將覆蓋前面定義的函數(shù)。

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

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

聲明

當(dāng)前資源，是在網(wǎng)絡(luò)資源中優(yōu)化，以及整理和排版，部分真實(shí)性已經(jīng)校驗(yàn)，因?yàn)樯婕暗綖g覽器的版本一直在升級(jí)，故請(qǐng)同學(xué)點(diǎn)擊測(cè)試結(jié)果對(duì)應(yīng)查看結(jié)果并參考。

支付掃碼

所有贊助/開支都講公開明細(xì)，用于網(wǎng)站維護(hù)：贊助名單查看

查看我的收藏

正在加載... ...