以前我在寫css的時候，常常發現沒寫錯但為什麼沒反應？然後開始陷入debug迴圈，後來才發現是權重出了問題，我想這也是大家都經歷過的痛吧！

在剛開始寫CSS的時候，覺得要寫得很精準，寫到心坎裡，
所以會有過於仔細的現象，導致css的權重問題，不好維護。
例如:

html樣式

<div class="wrap">
 <ul class="list">
     <li><a href="#"><img src="img/example01">example01</a></li>
     <li><a href="#"><img src="img/example02">example02</a></li>
     <li><a href="#"><img src="img/example03">example03</a></li>
 </ul>    
</div> 

CSS樣式

.wrap .list ul li a img{
weight: 300px;
}

白話文:class name為wrap，下的class name為list，下的li,下的a，下的img
寬度為300px

其實只要這樣寫就可以了

.lsit a{
  width: 300px;
}

所謂的權重就是指 css 的優先權，例如:

• 相同權重後寫的 css 可以覆蓋先寫的 css
• 當兩個選擇器同時作用在一個元素，權重高的優先生效

但是這些權重是怎麼計算的呢？

基本權重大小

inline style > ID > Class > Element > *

我們以分數做為權重的大小，給分越高權重越高

'*' 0分

很常用到的全站預設值，所以只要權重超過就可以覆蓋過它的預設。

全站預設值
*{
    margin: 0;
	padding: 0;
	border: 0;
 }

Element 1分

Element 總共有哪些呢？下面列出部分常見的

html, body, div, span, h1, h2, h3, h4, h5, h6,
p,ol, ul, li,a,img...

class 10分

class在 html 上面會寫成 class="box" ，在 css內長這樣 .box ，前方會有一個點'.'

.box{ 
height: 300px;
}

id 100分

在 html 上面是這樣寫的 id="box" ，在 css 內長這樣 #box，前方會帶井字號。

#box{
height: 300px;
}

inline style attribute 1000分

所謂的 inline style attribute 就是寫在 html 行內的 style

<div style="color:yellow">
    CSS Specificity
</div>

範例

ul li 都是 element 所以加起來是 2分

body div ul li a span 總共 6 個 element 所以加起來是 6分

body.list 一個 element 加上一個 class ，所以是 1+10=11分

.myclass ul li  兩個 element 加上一個 class ，所以是 10+1+1=12分

最後最後的王牌叫做 !important

!important 的權重非常高，可以蓋過所有的權重

.box{
    height: 300px;!important
}

只有 !important 能超越 !important，所以沒事不要亂用
這個意思是，當你在任何一段 css 裡面下了 !important，如果想要覆蓋原本的 css 又不直接改原本的檔案時，後來寫的 css 也必須加上 !important 才行。這樣會使得 css 很雜亂，因此如果了解權重，基本上用到 !important 的機會非常少。

.box{
    background-color: #000000;!important
}
.box{
    background-color:#ffffff;!important
}

結論

!important > inline style > ID > Class> Element > *

所以在寫css時要注意權重，才不會發生寫出來css正確，無法出現效果的情況。