css在書寫的過程中難免的會出現對同一個元素的屬性層疊，所以css也叫層疊樣式表，由此帶來的優先級問題值得我們瞭解。
接下來看一段代碼，裏面主要包含了類選擇器，通配選擇器，id選擇器，標籤選擇器以及行內樣式，我用它們分別設置了p標籤字體的顏色，接下來通過刪除來觀察它們的優先級
行內樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p2{
color: green;
}
*{
color: blue;
}
.p1{
color: yellow;
}
p{
color: black;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="color: red;">css選擇器優先級</p>
</body>
</html>
現在字體顏色爲紅色，如下圖。看來行內樣式是其中的最高優先級。
id選擇器
現在我們把行內樣式刪除，現在顏色變成了綠色，id選擇器起作用了，現在是：行內樣式>id選擇器
類選擇器
現在刪除id選擇器，我們的類選擇器生效了，字體變成了黃色，現在是：行內樣式>id選擇器>類選擇器
標籤選擇器
刪除了類選擇器，我們的標籤選擇器生效，字體爲黑，行內樣式>id選擇器>類選擇器>標籤選擇器
通配選擇器
最後只剩下了通配選擇器，字體爲藍色
得出結論：行內樣式>id選擇器>類選擇器>標籤選擇器>通配選擇器
但是呢僅僅掌握這些還不夠，現實中往往有更復雜的情況。
複雜情況–權重值
| 選擇器 | 權重值 |
|---|---|
| 通用選擇器 | 0 |
| 標籤選擇器 | 1 |
| 類選擇器 | 10 |
| id選擇器 | 100 |
| 行內樣式 | 1000 |
當我們遇見了一個複合的選擇器，例如 #p .a1 ul,它由類選擇器，id選擇器和標籤選擇器構成，它的權重就是三者權重之和，100+10+1=111
對於初學者計算這些權重可能比較麻煩，只要記住，選擇範圍越小越精確的複合選擇器，他的優先級通常越高。