CSS選擇器優(yōu)先級
瀏覽器是通過判斷CSS優(yōu)先級，來決定到底哪些屬性值是與元素最為相關的，從而作用到該元素上。CSS選擇器的合理組成規(guī)則決定了優(yōu)先級，我們也常常用選擇器優(yōu)先級來合理控制元素達到我們理想的顯示狀態(tài)，下面我們來具體了解下CSS選擇器優(yōu)先級及權重。
CSS選擇器如何計算？
當CSS選擇器權重相同，則最后的聲明的CSS選擇器覆蓋靠前的 CSS。
CSS優(yōu)先級是根據(jù)由每種選擇器類型構成的級聯(lián)字串計算而成的，它不是一個對應相應匹配表達式的權重值。
相同CSS表達式，在DOM結構中的距離是不會對元素優(yōu)先級計算產生影響的。
CSS優(yōu)先級順序
下列是一份優(yōu)先級逐級增加的選擇器列表：
通用選擇器
元素（類型）選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內聯(lián)樣式
多重樣式（Multiple Styles）
如果外部樣式、內部樣式和內聯(lián)樣式同時應用于同一個元素，就是使多重樣式的情況。
一般情況下，優(yōu)先級為：（外部樣式）External style sheet <（內部樣式）Internal style
sheet <（內聯(lián)樣式）Inline style
有個例外的情況，就是如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式。
示例如下：
<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>welcome sojson.com</h3>
</body>
結果：點擊我看上面的結果
選擇器的優(yōu)先權
選擇器的優(yōu)先權解釋說明
內聯(lián)樣式表的權值最高 1000。
ID選擇器的權值為 100。Class類選擇器的權值為 10。HTML標簽（類型）選擇器的權值為 1。
選擇器的權值進行計算比較，結果如下：
<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>
結果：<em> 標簽內的數(shù)據(jù)顯示為藍色：點擊我看上面的結果
CSS 優(yōu)先級規(guī)則：
選擇器都有一個權值，權值越大越優(yōu)先。
當權值相等時，后出現(xiàn)的樣式表設置要優(yōu)于先出現(xiàn)的樣式表設置。
創(chuàng)作者的規(guī)則高于瀏覽者：即網頁編寫者設置的CSS 樣式的優(yōu)先權高于瀏覽器所設置的樣式。
繼承的CSS 樣式不如后來指定的CSS 樣式
在同一組屬性設置中標有“!important”規(guī)則的優(yōu)先級最大。
CSS !important 規(guī)則實例：
<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>
結果：在Firefox 下顯示為藍色；在IE6 下顯示為紅色：點擊我看上面的結果
使用腳本添加樣式：
當在連接外部樣式后，再在其后面使用JavaScript腳本插入內部樣式時（即內部樣式使用腳本創(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)建內部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 瀏覽器下CSS渲染的順序可能如下
IE下載的順序是從上到下；JavaScript 函數(shù)的執(zhí)行會阻塞
IE的下載；IE渲染的順序也是從上到下；IE的下載和渲染是同時進行的；在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（但并不是說所有相關聯(lián)的元素都已經下載完。）
在下載過程中，如果遇到某一標簽是嵌入文件，并且文件是具有語義解釋性的（例如：
JS腳本，CSS樣式），那么此時IE的下載過程會啟用單獨連接進行下載。并且在下載后進行解析，如果JS、CSS中如有重定義，后面定義的函數(shù)將覆蓋前面定義的函數(shù)。解析過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。并以此方式一直渲染下去，直到整個頁面渲染完成。
Firefox處理下載和渲染的順序大體相同，只是在細微之處有些差別，例如：iframe的渲染。
聲明
當前資源，是在網絡資源中優(yōu)化，以及整理和排版，部分真實性已經校驗，因為涉及到瀏覽器的版本一直在升級，故請同學點擊測試結果對應查看結果并參考。