在學習 CSS 的時候，一定會先認識什麼是 html element、什麼是 class、什麼是 id，什麼是 css 的 inline 寫法。了解基本的 css 之後，有一個東西一定要先了解，那就是 css 權重。

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

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

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

先說一下基本的權重大小

inline style > ID > Class > Element > *

那麼來看他們的權重吧

以下的圖，最左邊的權重最高，最右邊的權重最低。

*

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

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

Element

所有的 Element 的權重都是 0-0-0-1。
Element 總共有哪些呢？下面列出部分常見的，其他的請參考 MDN

div, p, ul, ol, li, em, header, footer, article....

class

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

每一個 class 的權重都是 0-0-1-0。

id

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

每一個 id 的權重都是 0-1-0-0。

inline style attribute

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

inline style attribute 的權重為 1-0-0-0 。

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

除了這些還有

除了上面講到的那些，大家一定會常看到

• psuedo-class(偽類)，如：

:nth-child() 、 :link 、 :hover 、 :focus 等
:only-of-type 、 :nth-of-type

• attribute（屬性選擇器），如：

[type:checkbox]、[attr]

這兩個的權重跟 class 是一樣的，都是 0-0-1-0 。

那麼來試試看

ul>li 都是 element 所以加起來是 0-0-0-2

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

li.myclass 一個 element 加上一個 class ，所以是 0-0-1-1

li.myclass ~ li 兩個 element 加上一個 class ，所以是 0-0-1-2

form input[type=email] 兩個 element 、一個 attribute，所以是 0-0-1-2

還有一個終極大魔王叫做 !important

!important 的權重非常高，可以蓋過所有的權重
用法如下：

.product{
    width: 200px;!important
}

只有 !important 能超越 !important，所以沒事不要亂用

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

.box{
    background-color: #f00;!important
}
.box{
    background-color: #aaa;!important
}

結論

!important > inline style > ID > Class/psuedo-class(偽類)/attribute（屬性選擇器） > Element

因此在寫 css 要很注意你寫的權重，才不會發生寫出來的 css 無法出現效果的情況。

以上是今天介紹的 CSS 權重。 各位看倌明天見囉～

參考資料：
[1] https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element
[2] http://cssspecificity.com/
[3] https://coding.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/