一、優先順序

1. 在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2. 作為style屬性寫在元素內的樣式
3. id選擇器
4. 類選擇器
5. 元素選擇器
6. 萬用字元選擇器
7. 瀏覽器自定義或繼承

總結排序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 元素 > 萬用字元 > 繼承 > 瀏覽器預設屬性

(1) 同一級別中後寫的會覆蓋先寫的樣式

(2) 同一級別css引入方式不同，優先順序不同
總結排序：內聯(行內)樣式 > 內部樣式表 > 外部樣式表 > 匯入樣式(@import)。

對於選擇器優先順序，還可以通過計算權重值來比較。（請參見：狠狠戳我）

例1、
test.css檔案

#my{background:blue;}

html檔案

<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*這裡是內部樣式*/
#my{background:red;}
</style>

<span id="my">333</span>

執行結果：span最後為紅色。
說明css引入方式優先順序：內部樣式表 > 外部樣式表

例2、

 <link rel="stylesheet" type="text/css" href="./css/test.css">
 <style>#my{background:red;}</style>
 <span id="my" style="background: yellow">333</span>

執行結果：span最後為黃色。
說明css引入方式優先順序：內聯(行內)樣式 > 內部樣式表 > 外部樣式表

二、選擇器

1、普通選擇器

2、屬性選擇器

3、偽類

注：link、visited、active、hover的順序，為LoVe HAte

4、偽元素

三、一些注意

1、id選擇器

www3school中所說：“一個id選擇器 只能在一個文件中使用一次“，
但在css實踐中你會發現 兩個同樣的id都會生效。

<style>
span{margin: 5px;}  
#my{background:red;}
</style>

  <span id="my">666</span>
  <span id="my">333</span>

執行結果為:

問：那為什麼官方文件只讓使用一次呢？

答：若使用兩次，第一影響就是不能通過W3的校驗。
在頁面顯示上，目前的瀏覽器css還都允許你犯這個錯誤，用多個相同ID“一般情況下”也能正常顯示。
但是當你需要用JavaScript通過id來控制這個div，那就會出現錯誤。因為js裡獲取DOM是通過getElementById，而如果頁面出現同一個id幾次，這樣就獲取不到了。所以id要有唯一性。

2、多類選擇器

類選擇器很簡單，那多類選擇器呢？好好看下面的例子及註釋。
www3school
例1：2個類

<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}

/*.important和.warning之間不能有空格*/
/*.warning.important {background:silver;}顛倒順序執行結果不變*/
.important.warning {background:silver;}
</style>

<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>

執行結果：

例2：3個類
注：如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。

<style>
.important {font-weight:bold;}
.warning {font-style:italic;}
/*.important和.warning之間不能有空格*/
/*.warning.important {background:silver;}顛倒順序執行結果不變*/
.important.warning {background:silver;}
</style>

<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important urgent warning">This paragraph is a very important warning.</p>

執行結果：同上