[原創]通過IE8的測試來看CSS選擇符的樣式渲染優先順序

以下內容為個人測試結果，僅供參考

1、選擇符樣式的優先順序為：

內聯樣式 > 多級選擇符樣式 > ID選擇符樣式 > CLASS選擇符樣式 > TAG選擇符樣式

比如標籤內定義的 style="color:red" 是內聯樣式，是優先順序最高的，而類似 div {color:blue} 這樣的單純tagname的選擇符是優先順序最低的。

2、多層的選擇符會根據單層選擇符的優先順序逐級載入並保留優先權最高的樣式，層級越多許可權越高，同層級內按照單層選擇符優先順序決定保留樣式。

多級選擇符定義優先順序高於單層選擇符定義，比如 DIV #mydiv {...} 這個定義會覆蓋 #mydiv {...} 定義內的同名屬性值。

3、選擇符樣式的載入順序是按文字資料流自上而下載入，不同選擇符的樣式優先順序跟定義的位置先後沒有關係，比如應用於同一標籤的ID和CLASS選擇符，無論先定義誰，都是ID選擇符優先順序高。

而同名選擇符的樣式總是後載入的相同樣式屬性優先順序高，會覆蓋當前已有的屬性定義;可以認為同名選擇符的樣式會被瀏覽器按照載入順序合并不同樣式屬性定義、覆蓋相同樣式屬性定義，最終形成一個唯一的整體CLASS定義。

4、多個CLASS選擇符應用於同一個標籤時，各CLASS的優先順序跟應用次序無關，只與它們定義時的位置次序有關。個人猜想，IE很可能是把所有應用到的CLASS全部枚舉出來，然後按照這些CLASS的定義次序進行合并，跟這些CLASS被引用時的次序無關。看來IE對多個不同名CLASS樣式的合并仍然遵循其對同名CLASS定義合并的原則，文字資料流順序內後定義的優先順序高。

比如 <div class="c2 c0 c1"> 不論c0,c1,c2被引用時是什麼次序，合并順序仍然按照他們在樣式表裡的定義順序來合并。不知道其它瀏覽器是不是也遵循這個原則？以前總是想當然的認為多個CLASS應用於同一標籤時，是按照引用次序來渲染樣式的，經過測試才知道，還是按照被引用CLASS的定義次序來渲染的。

 

總結：樣式渲染的優先順序取決於選擇符的個人化程度，私人程度越高優先順序越高。