91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css樣式優先級法則的示例分析

發布時間:2021-01-30 13:18:26 來源:億速云 閱讀:226 作者:小新 欄目:web開發

這篇文章給大家分享的是有關css樣式優先級法則的示例分析的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

css樣式優先級介紹:

當外部樣式、內部樣式和內聯樣式同時應用于同一個元素時,優先級如下:

(外部樣式)External style sheet <(內部樣式)Internal style sheet <(內聯樣式)Inline style

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

示例如下:

<head>    
    <style type="text/css">    
      /* 內部樣式 */    
      h4{color:green;}    
    </style>    
    <!-- 外部樣式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 設置:h4{color:blue;} -->    
</head>    
<body>    
    <h4>測試!</h4>    
</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>

結果:<em> 標簽內的數據顯示為藍色。

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文件中,代碼如下:    
       h4 {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="h4 {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>    
  <h4>在IE中我是綠色,非IE瀏覽器下我是藍色!</h4>    
</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("h4","color:green;");    
alert(oStyleSheet.rules[0].style.cssText);    
alert(document.styleSheets[0].rules[0].style.cssText);    
//方式2    
var cssStr="h4 {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樣式優先級法則的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

芷江| 波密县| 凉城县| 镇康县| 兴宁市| 宜都市| 灵石县| 汉阴县| 太仓市| 丹寨县| 运城市| 昌图县| 济源市| 衡山县| 正安县| 海南省| 双流县| 洪江市| 濮阳县| 镇远县| 永州市| 民权县| 滁州市| 平山县| 申扎县| 云梦县| 阿鲁科尔沁旗| 东丰县| 屏东市| 湟源县| 瑞昌市| 永清县| 漳州市| 巴楚县| 平阳县| 江孜县| 巍山| 长泰县| 宜川县| 肃北| 潞城市|