首頁 >web前端 >css教學 >css樣式優先權法則

css樣式優先權法則

王林轉載: 2021-01-30 10:31:184277瀏覽

css樣式優先權法則

css樣式優先順序介紹：

當外部樣式、內部樣式和內聯樣式同時套用於同一個元素時，優先順序如下：

（外部樣式）External style sheet

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

範例如下：

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

選擇器的優先權

css樣式優先權法則

#解釋：

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>

結果： 標籤內的資料顯示為藍色。

CSS 優先權法則：

##A 選擇器都有一個權值，權值越大越優先；

B 當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；

C 創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；

D 繼承的CSS 樣式不如後來指定的CSS 樣式；

E 在同一組屬性設定中標有「!important」規則的優先順序最大；範例如下：

（學習影片分享：

css影片教學）

<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 的渲染。

css樣式優先權法則

相關文章