【HTML、CSS教學】5. CSS權重

🚩 CSS權重

網頁在載入CSS的時候是有順序性，順序分別為：

inline 套用CSS →HTML內部載入CSS →外部載入CSS

1. inline 套用CSS
   直接在html上寫CSS，例如：<div class=”wrap” style=”color:white;”>
2. HTML內部載入CSS
   直接在html的<style>標籤內寫CSS
3. 外部載入CSS
   在html的head裡引用，例如：<link rel=”stylesheet” href=”css/all.css”>

CSS選擇器類型的明確度順序為：

id > class > element

CSS的讀取是由上而下的，當後讀取的權重大於等於先讀取時，後讀取的設定會蓋掉前面的，所以CSS Reset需要寫在最上面，之後才是自己寫的CSS。

權重分數計算如表：

這邊用分數來舉例，只是方便理解權重大小的差異，實際上不同層的分數，即使再高也無法超越上一層。例如：
寫了十次.box的class name，它的權重依然比只寫一次#test1的id還要小。

其中!important是一個很特別的用法，它可以打破不同層級的界線。
例如在inline寫上CSS，原先外部載入CSS不管怎麼寫，都無法蓋過在inline的寫法，但透過!important就可以強制套用。

不過一般不會建議使用，因為這會在管理CSS上造成很大的困擾，若是外部載入的CSS寫了!important，那inline的寫法又要取代外部載入的CSS時，
僅能在inline加入!important才能夠覆蓋。
只有important可以超越important。

!important是在沒有更好的辦法下所使用的，一般不建議使用，否則會增加維護的困難。

🚩 範例說明

權重分數範例1：

權重分數範例2：

若是如以下的範例，字體大小將會套用 60px，
因為在.box2 的 font-size 寫了 !important。

<style>
.box2{
  font-size: 60px !important;
}
.box1 .box2 {
  font-size: 10px;
}
</style>
<div class="box1">
  <div class="box2">範例</div>
</div>

🚩 CodePen 範例