1. CSS選擇器判斷過程：

第一步：判斷選擇器的權重(多重組合樣式同理，多個class<一個id); 權重從大到小依次為:

• !import
• 元素行內樣式
• ID選擇器
• 偽類選擇器/屬性選擇器>類選擇器
• tag標簽選擇器
• *通配符
• 繼承

第二步: 同種類型的權重判斷選擇器的順序

• 同種類型的權重不同層數，組合層數多的 > 組合層數少的
• 同種類型的權重同等層數，後定義的 > 先定義的

2.實例

(1). 單個選擇器，不同權重

//HTML
<div class=‘styleParent‘><a id="style" class="style" href="javascript:;">css樣式</a></div>

// CSS
#style { color: red; }
.style { color: blue; }
 

說明：ID選擇器 > class選擇器； 最終顯示為紅色；

(2).多個低權重，一個高權重

#style { color: red; }
.styleParent > .style { color: blue; }

說明：ID選擇器 > class選擇器； 最終顯示為紅色；

(3). 相同權重，不同層數

.styleParent > .style { color: red; }
.style { color: blue; }

說明：同種權重，層數多的 > 層數少的； 最終顯示為紅色；

(4). 相同權重，相同層數

 .style { color: red; }
.style { color: blue; }
 

說明：同種權重，相同層數， 後定義的 > 先定義的； 最終顯示為藍色；

3. CSS 使用註意事項:

(1). 不要再ID選擇器前使用標簽名

解釋：ID選擇是唯一的，加上標簽名相當於畫蛇添足了，沒必要。

(2). 不要在類選擇器前使用標簽名

解釋：如果沒有相同類的名字出現就是沒必要，但是如果存在多個相同名字的類選擇器則有必要添加標簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

(3). 盡量少使用層級關系

如：#divclass p.colclass{color:red;}改為 .colclass{color:red;}

CSS 選擇器優先級