很抱歉 Day 2 並沒有承接著Day 1的內容
原因是我在思考內容時總會聯想到許多東西, 而那些東西都讓我想好好地複習、更新
且該篇核心內容並不足以成為一篇文章，比較適合在提及@media一同講解
因此暫且先跳過。

CSS特定度specificity

一個特別重要卻常被忽視的概念。

如果對特定度specificity沒深刻的了解, 那就會寫CSS的時候突然發現明明設定了樣式但樣式卻改變不了的狀況, 然後花很多時間去處理它, 最慘的是有些人甚至為了方便直接硬加!important來強制覆寫, 造成日後維護上的困難。

其實特定度specificity是個簡單的規則邏輯, 這次趁著自己複習的時候順便再做個筆記與大家分享。

首先來看這個順序 (a, b, c, d), 越左邊的字母代表權重越大
而且是後者永遠蓋不過前者, 意思是指 a 永遠大過 nb + nc + nd (n代表任意數)
知道此概念後接著看看a, b, c, d個代表什麼

• a 透過HTML的style屬性套用, 則a=1, 若沒有則為 0
• b ID數目
• c 類別class + 屬性attrubute + 偽類別pseudoclasses
• d 元素element + 偽元素seudoelements

在了解特定度後, 要記住另一個最簡單的規則：
相同的特定度下, 後者的設定會蓋過前者

另外 !important 關鍵字, 作為救星的同時也是大家最痛恨的關鍵字
有兩點點需要注意

1. 當賦予此關鍵字後, 特定度將會是最大
2. 遵照同特定度後者蓋前者的規則

在特定度specificity觀念清楚的情況下一般來說不太會用到!important
通常!important適合出現在工具類別

考慮以下範例：

/*
 | 消失類, 常用於js添加到element class上來隱藏元素
 */
.hide {
  display: none !important;
}

/*
 | 文字對其
 */
.align-left {
  text-align: left !important;
}
.align-center {
  text-align: center !important;
}
.align-right {
  text-align: right !important;
}

這種工具類別雖然有時好用, 但過度使用也會在成維護上的困難, 使用時請務必多加思考是否由其必要性。