CSS階層

在使用CSS時，可能會出現兩個規則同時套用在一個元素上的問題，關於規則的先後順序，以下加以說明。

1. 權重：!important > inline style行內CSS > ID選擇器(#) > class類別選擇器(.) > element元素選擇器 > 通用選擇器(*)

2. 後者優先：如果兩個選擇器相同的話，後者優先於前者。

3. 指定程度：選擇器的指定性越高，會優先於一般的選擇器。
   舉例：
   div p {}比div {}更具指定性
   h1#idname {}比h1 {}更具指定性

4. 可以在任何屬性值後面加上!important，用來表示此規則比起其他套用到相同元素的規則更為重要。
   舉例：
   HTML

   <p class="text">今天的天空是什麼顏色?</p>
   

   CSS

   p::after {
       color: hotpink!important;
       content: "粉紅色"!important;
   }
   
   p::after {
       color: aqua;
       content: "藍色";
   }
   

   顯示：
   

   *雖然是後者優先，但在前者的屬性值後面加上了!important，因此顯示粉紅色。

參考資料：https://medium.com/@small2883/css%E5%A6%82%E4%BD%95%E8%A6%8F%E7%AF%84%E9%9A%8E%E5%B1%A4-84e7f52b82ca