CSS優先級規則：類型、來源、特異性、位置

css-cascade

本文從類型、來源、特異性、位置四個方面描述了css的優先級規則。

four level/type of the importance

首先看類型，以下4種類型，重要性依次降低。

1. transition (active)
2. !important
3. animation (active)
4. normal

origin

類型相同，看這個規則是在哪裏規定的。

1. website
2. user
3. browser

注意，!important的優先級在這裏是反過來的，即如果瀏覽器默認設置了!important規則，那麼它將戰勝網站設置的!important規則。

specificity

分爲4個等級，優先級逐漸降低：

1. inline
2. id
3. class | attribute | pseudo-class，比如[checked]/[href="https://lala.com"]/:hover
4. type | pseudo-element，比如::before/::selection

注意，這裏優先級是可以疊加的，類似一個id選擇器等於100，一個tag選擇器等於1那樣的加法

position

寫在後面的css規則優先級更高。