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;}