1、從CSS代碼放置的位置看權重優先級：
內聯樣式 > 內部嵌入樣式 >外聯樣式
2、從樣式選擇器的權重優先級：
Important > 內聯樣式 > ID > 類、偽類、屬性選擇器 > 標簽、偽元素 > 通配符
今兒，我們重點來看看第2點—樣式選擇器。
請看以下代碼：
css
運行代碼，效果圖如下：
是粉紅色。按照上面的說法class1、class2不都屬于類嘛。既然優先級一樣，那不就應該是后面的class2（綠色）覆蓋住class1（粉紅色）嗎？
是的。類是屬于同一級，但是div.class1和.class2的優先權重是不一樣的。
請看下表：
|
選擇器 |
權重 |
|
!important |
1,0,0,0 |
|
ID |
0,1,0,0 |
|
類、偽類、屬性選擇器 |
0,0,1,0 |
|
標簽、偽元素 |
0,0,0,1 |
|
通配符 |
0,0,0,0 |
當我們看到html代碼時，不要單一看它調用的是什么樣式，比如上面的class1、class2在放在div標簽上時，都一樣，類嘛
但是，其實它們的權重是不一樣的。所以要追蹤到css樣式中，查看它們的權重。
這個權重的計算方法就是利用上面表中對應的權重值，疊加，得到最終值。值越大，權重就越大，從而優先級也就越高咯。
如上面代碼中的class1、class2：
結合上面中列出的權重，從而可得class1和class2的權重
class1 = div(0001)+.class1(0010) = 0011
class2 = .class2(0010) = 0010
class1的權重大于class2的權重，從而class1的優先級就高于class2咯。
所以，顯示class1的粉紅色咯 。
下面列舉了幾個css表達式的權重值，自我測試下：
|
css選擇器表達式 |
權重值 |
|
h1 + *[rel = up ] |
0011 |
|
li.red.level |
0021 |
|
#test:not(ii) |
0110 |
|
#test:before |
0101 |
好了，那當樣式的優先級一樣呢？那就得看它們出現的順序了。后出現的覆蓋前面的。
注意：是樣式表中的順序，而不是html標簽中class出現的順序。
如下：
css
