爲同一個p元素設置id爲intro與class爲bb，對他們進行不同顏色設置，結果應用了針對id設置時顯示的顏色
<html>
<head><style type="text/css">
p{color:red}
#intro {color:green}
.bb{color:black}
</style>
</head>
<body>
<p id="intro" class=“bb">This is a paragraph of introduction.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>
結果：
總結：
CSS樣式選擇器分爲4個等級，a、b、c、d，可以以這四種等級爲依據確定CSS選擇器的優先級。
1.1!important 權重最高，比 inline style 還要高 ，是最高權重（w>a)
2.如果樣式是行內樣式（通過Style=””定義），那麼(w=a)
3.ID選擇器(w=b)
4.Class類選擇器(w=c)。
5.類型選擇器(w=d)
6.屬性選擇器，僞類選擇器和class類選擇器優先級一樣(w=c)，僞元素選擇器和類型選擇器一樣(w=d)
2.如果樣式是行內樣式（通過Style=””定義），那麼(w=a)
3.ID選擇器(w=b)
4.Class類選擇器(w=c)。
5.類型選擇器(w=d)
6.屬性選擇器，僞類選擇器和class類選擇器優先級一樣(w=c)，僞元素選擇器和類型選擇器一樣(w=d)
- 通配選擇符的權值 0,0,0,0
- 標籤的權值爲 0,0,0,1
- 類的權值爲 0,0,1,0
- 屬性選擇的權值爲 0,0,1,0
- 僞類選擇的權值爲 0,0,1,0
- 僞對象選擇的權值爲 0,0,0,1
- ID的權值爲 0,1,0,0
- important的權值爲最高 1,0,0,0
使用的規則也很簡單，就是 選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致CSS的重複定義，代碼冗餘。
從上面我們可以得出兩個關鍵的因素：
- 權值的大小跟選擇器的類型和數量有關
- 樣式的優先級跟樣式的定義順序有關