使用CSS時，因為 CSS 為 "層疊" 的，也就是同一個元素可以利用利用不同的 selector 規則，把樣式疊加上去，但當不同的規則間有衝突時，例如 a.title{color:#000;} 與 a{color:#333;} 兩個規則都設定了color的樣式，這時就要考慮權重來決定最後要以哪個規則來呈現 color 這個發生衝突的樣式 。
權重如下：
| 規則 | 權重 | 範例 |
|---|---|---|
| 行內樣式 | 1000 | <a style="..."> |
| id | 100 | #title |
| attribute / class / pseudo-class | 10 | [type="radio"] , .title, :hover |
| element / pseudo-element | 1 | a, :before |
| universal / combinattor /negation pseudo-class | 0 | * , +,>,~, :not() |
假設發生衝突的部分剛好權重又一樣，權重的計算，也是層疊的，可參考一下的例子：
- a => 1
- a.title => a + .title => 1+10 =11
- #title a => #title + a => 100+1 = 101
- a:hover => a + :hover => 1 + 10 = 11
假設發生衝突的部分剛好權重又一樣時，則看規則出現的順序，後面的會覆寫前面的。
最後還有一個"重要" 的規則，也就是 !important ，這個會覆寫所有的規則，但若存在兩個(或以上)的規則都有!important 的話，則一樣看權重及順序。