在寫前端樣式時，總是會用到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元素” >“外部樣式檔案”，但對於樣式檔案中的多個相同樣式的優先順序怎樣排列，沒有詳細說明。經過測試和繼續搜尋，得知優先順序如下排列：

1. 樣式表的元素選擇器選擇越精確，則其中的樣式優先順序越高。
   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>

1. 對於相同型別選擇器指定的樣式，在樣式表文件中，越靠後的優先順序越高。
   注意：這裡是樣式表文件中越靠後的優先順序越高，而不是在元素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>

1. 如果要讓某個樣式的優先順序變高，可以使用!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者最優先!