css樣式的加載順序及覆蓋順序

在寫前端樣式時，總是會用到bootstrap框架，雖說bootstrap框架上的樣式已經十分齊全，但是在實際使用過程中，總是會想要達到的效果有一定差距，這時候就需要我們自己對bootstrap原有樣式進行覆蓋。而這就涉及到了css樣式表中的樣式覆蓋順序問題。
css樣式層疊優先級是: 瀏覽器缺省 < 外部樣式表(引入的css文件) < 內部樣式表(<style>標簽內的樣式) < 內聯樣式(style=”)
其中樣式表又有: 類選擇器(.class) < 類派生選擇器(.class h1) < ID選擇器(#id) < ID派生選擇器(#id h1)
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是: 瀏覽器缺省 < 外部樣式表(css文件) < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內部樣式表(<style>標簽內的樣式) < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式(style=”) 共12個優先級
查找一些教材中(w3schools等)，只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對於樣式文件中的多個相同樣式的優先級怎樣排列，沒有詳細說明。經過測試和繼續搜索，得知優先級如下排列：

樣式表的元素選擇器選擇越精確，則其中的樣式優先級越高。 id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式

通過下面的實例可以得出此結論

<style type="text/css">




 #p {color:red}
 .blue{color:blue}
 p{color:green}
</style>
<p> 我是綠色，p{color:green}</p>
<p class="blue"> 我是藍色，class="blue"</p>
<p id="p" class="blue">我是紅色，class="blue"不起作用</p>

對於相同類型選擇器指定的樣式，在樣式表文件中，越靠後的優先級越高。 注意：這裏是樣式表文件中越靠後的優先級越高，而不是在元素class出現的順序。

比如以下實例，.class2在樣式表中出現在.class3和.class1之後，所以.class2生效：

<style type="text/css">
 .class3 {color: blue}
 .class1 {color: green;}
 .class2 {color: red;}
</style>
<p class="class1 class2 class3"> 我是紅色，class2生效</p>




<p>注意：這裏是樣式表文件中越靠後的優先級越高，而不是在元素class出現的順序。</p>

如果要讓某個樣式的優先級變高，可以使用!important來指定。

<style type="text/css">
 .class3 {color: blue}
 .class1 {color: green !important;}
 .class2 {color: red;}
</style>
<p class="class3 class2"> 我是紅色，class2生效</p>
<p class="class1 class2 class3"> 我是綠色，class1生效</p>

上述代碼得知：如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個並以空格分開，其優先級順序為：一個元素同時應用多個class，後定義的優先(即近者優先)，加上!important者最優先!