樣式的優先級

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

一般情況下，優先級如下：

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

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

示例如下：

選擇器的優先權

解釋：

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

2. ID 選擇器的權值為 100

3. Class 類選擇器的權值為 10

4. HTML 標簽選擇器的權值為 1

利用選擇器的權值進行計算比較，示例如下：

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

CSS 優先級法則：

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

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

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

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

E 在同一組屬性設置中標有“!important”規則的優先級最大；示例如下：

結果

使用腳本添加樣式

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

結果：在Firefox / Chrome / Safari / Opera 中，文字都是藍色的。而在IE 瀏覽器中，文字卻是綠色的。

附加

在IE 中添加樣式內容的JavaScript 代碼：

IE 瀏覽器下載或者渲染的順序可能如下：

● IE 下載的順序是從上到下；

● JavaScript 函數的執行會阻塞IE 的下載；

● IE 渲染的順序也是從上到下；

● IE 的下載和渲染是同時進行的；

● 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（但並不是說所有相關聯的元素都已經下載完。）

● 在下載過程中，如果遇到某一標簽是嵌入文件，並且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那麽此時IE的下載過程會啟用單獨連接進行下載。並且在下載後進行解析，如果JS、CSS中如有重定義，後面定義的函數將覆蓋前面定義的函數。

● 解析過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。並以此方式一直渲染下去，直到整個頁面渲染完成。

● Firefox 處理下載和渲染的順序大體相同，只是在細微之處有些差別，例如：iframe 的渲染。

原文鏈接：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

CSS 的優先級機制[總結]