CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級(jí)及樣式覆蓋問(wèn)題探討
發(fā)布時(shí)間：2013-02-01 17:21:40 作者：佚名 
我要評(píng)論
我要評(píng)論多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況.有個(gè)例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式,感興趣的朋友可以了解下，或許本文對(duì)你有所幫助
樣式的優(yōu)先級(jí)
多重樣式（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">
/* 內(nèi)部樣式 */
h3{color:green;}
</style>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設(shè)置：h3{color:blue;} -->
</head>
<body>
<h3>測(cè)試！</h3>
</body>
選擇器的優(yōu)先權(quán)
對(duì)上圖的解釋如下：
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；
<html>
<head>
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍(lán)色 */
}
#redP p span em {
/* 權(quán)值 = 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>
結(jié)果：<em> 標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色。
CSS 優(yōu)先級(jí)法則
•選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先；
•當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；
•創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁(yè)編寫(xiě)者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；
•繼承的CSS 樣式不如后來(lái)指定的CSS 樣式；
•在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級(jí)最大；
示例如下：
<html>
<head>
<style type="text/css">
#redP p{
/*兩個(gè)color屬性在同一組*/
color:#00f !important; /* 優(yōu)先級(jí)最大 */
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>
結(jié)果：在Firefox 下顯示為藍(lán)色；在IE 6 下顯示為紅色；
使用腳本添加樣式
當(dāng)在連接外部樣式后，再在其后面使用JavaScript 腳本插入內(nèi)部樣式時(shí)（即內(nèi)部樣式使用腳本創(chuàng)建），IE 瀏覽器就表現(xiàn)出它的另類了。
代碼如下：
<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 創(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 瀏覽器中，文字卻是綠色的。
附加
在IE 中添加樣式內(nèi)容的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>之前，
但實(shí)際內(nèi)存中，<style>卻在<link>之后。
這也是“IE中奇怪的應(yīng)用CSS的BUG”之所在！
*/
var oStyleSheet = document.styleSheets[0];
//這實(shí)際是在<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 瀏覽器下載或者渲染的順序可能如下：
1.IE 下載的順序是從上到下；
2.JavaScript 函數(shù)的執(zhí)行會(huì)阻塞IE 的下載；
3.IE 渲染的順序也是從上到下；
4.IE 的下載和渲染是同時(shí)進(jìn)行的；
5.在渲染到頁(yè)面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（但并不是說(shuō)所有相關(guān)聯(lián)的元素都已經(jīng)下載完。）
6.在下載過(guò)程中，如果遇到某一標(biāo)簽是嵌入文件，并且文件是具有語(yǔ)義解釋性的（例如：JS腳本，CSS樣式），那么此時(shí)IE的下載過(guò)程會(huì)啟用單獨(dú)連接進(jìn)行下載。并且在下載后進(jìn)行解析，如果JS、CSS中如有重定義，后面定義的函數(shù)將覆蓋前面定義的函數(shù)。
7.解析過(guò)程中，停止頁(yè)面所有往下元素的下載。樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行樣式渲染。并以此方式一直渲染下去，直到整個(gè)頁(yè)面渲染完成。
8.Firefox 處理下載和渲染的順序大體相同，只是在細(xì)微之處有些差別，例如：iframe 的渲染。
多重樣式（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)部樣式。
示例如下：
復(fù)制代碼
代碼如下:<head>
<style type="text/css">
/* 內(nèi)部樣式 */
h3{color:green;}
</style>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設(shè)置：h3{color:blue;} -->
</head>
<body>
<h3>測(cè)試！</h3>
</body>
選擇器的優(yōu)先權(quán)
對(duì)上圖的解釋如下：
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；
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍(lán)色 */
}
#redP p span em {
/* 權(quán)值 = 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>
結(jié)果：<em> 標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色。
CSS 優(yōu)先級(jí)法則
•選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先；
•當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；
•創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁(yè)編寫(xiě)者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；
•繼承的CSS 樣式不如后來(lái)指定的CSS 樣式；
•在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級(jí)最大；
示例如下：
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
#redP p{
/*兩個(gè)color屬性在同一組*/
color:#00f !important; /* 優(yōu)先級(jí)最大 */
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>
結(jié)果：在Firefox 下顯示為藍(lán)色；在IE 6 下顯示為紅色；
使用腳本添加樣式
當(dāng)在連接外部樣式后，再在其后面使用JavaScript 腳本插入內(nèi)部樣式時(shí)（即內(nèi)部樣式使用腳本創(chuàng)建），IE 瀏覽器就表現(xiàn)出它的另類了。
代碼如下：
復(fù)制代碼
代碼如下:<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 創(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 瀏覽器中，文字卻是綠色的。
附加
在IE 中添加樣式內(nèi)容的JavaScript 代碼：
復(fù)制代碼
代碼如下: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>之前，
但實(shí)際內(nèi)存中，<style>卻在<link>之后。
這也是“IE中奇怪的應(yīng)用CSS的BUG”之所在！
*/
var oStyleSheet = document.styleSheets[0];
//這實(shí)際是在<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 瀏覽器下載或者渲染的順序可能如下：
1.IE 下載的順序是從上到下；
2.JavaScript 函數(shù)的執(zhí)行會(huì)阻塞IE 的下載；
3.IE 渲染的順序也是從上到下；
4.IE 的下載和渲染是同時(shí)進(jìn)行的；
5.在渲染到頁(yè)面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（但并不是說(shuō)所有相關(guān)聯(lián)的元素都已經(jīng)下載完。）
6.在下載過(guò)程中，如果遇到某一標(biāo)簽是嵌入文件，并且文件是具有語(yǔ)義解釋性的（例如：JS腳本，CSS樣式），那么此時(shí)IE的下載過(guò)程會(huì)啟用單獨(dú)連接進(jìn)行下載。并且在下載后進(jìn)行解析，如果JS、CSS中如有重定義，后面定義的函數(shù)將覆蓋前面定義的函數(shù)。
7.解析過(guò)程中，停止頁(yè)面所有往下元素的下載。樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行樣式渲染。并以此方式一直渲染下去，直到整個(gè)頁(yè)面渲染完成。
8.Firefox 處理下載和渲染的順序大體相同，只是在細(xì)微之處有些差別，例如：iframe 的渲染。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇CSS樣式覆蓋規(guī)則全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-08-05
css文件中的樣式類被覆蓋，js文件中的變量未定義問(wèn)題
這篇文章主要介紹了css文件中的樣式類被覆蓋，js文件中的變量未定義問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-04-27- 很多的新手朋友們對(duì)css樣式加載順序和覆蓋順序的理解有所偏差，下面用示例為大家詳細(xì)的介紹下，感興趣的朋友不要錯(cuò)過(guò)2013-12-19
- 對(duì)同一個(gè)標(biāo)簽設(shè)置多個(gè)相同屬性，但是值不一樣，結(jié)果會(huì)是怎樣呢？到底是誰(shuí)覆蓋了誰(shuí)，下面為大家詳細(xì)解讀，有此需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-18
- 在頁(yè)面中，我們常用id、class以及內(nèi)聯(lián)樣式表來(lái)設(shè)置我們的組件CSS，在網(wǎng)頁(yè)中css樣式根據(jù)css優(yōu)先級(jí)來(lái)使用，優(yōu)先級(jí)高的會(huì)覆蓋優(yōu)先級(jí)低的css樣式，本文通過(guò)實(shí)例代碼給大家詳細(xì)2023-01-03