CSS 的優先順序機制

最後更新：2017-02-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

樣式的優先順序

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

一般情況下，優先順序如下：

（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style

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

樣本如下：

<head>

/* 內部樣式 */

h3{color:green;}

</style>

</head>

<body>

</body>

選取器的優先權

解釋：

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

2. 識別碼選取器的權值為 100

3. Class 類別選取器的權值為 10

4. HTML 標籤選取器的權值為 1

利用選取器的權值進行計算比較，樣本如下：

<html>

<head>

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

<p class="red">red

</p>

</p>

</body>

</html>

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

CSS 優先順序法則：

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

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

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

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

E 在同一組屬性設定中標有“!important”規則的優先順序最大；樣本如下：

<html>

<head>

#redP p{

/*兩個color屬性在同一組*/

color:#00f !important; /* 優先順序最大 */

color:#f00;

}

</style>

</head>

<body>

<p>color</p>

</p>

</body>
</html>

結果：在Firefox 下顯示為藍色；在IE 6 下顯示為紅色；

使用指令碼添加樣式

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

<html>

<head>

<!-- 在外部的styles.css檔案中，代碼如下：

h3 {color:blue;}

-->

<!--

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS 的優先順序機制

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support