如果當 CSS 選擇器選取元素時，發生「多個選擇器選擇到同一個元素」的狀況，就會根據「權重 Specificity」來判斷這個元素套用樣式的「優先順序」，這篇教學將介紹 CSS 選擇器裡最重要的觀念「權重 Specificity」，還會透過完整的權重示意圖呈現 CSS 的權重樣貌。

影片重點：

• 00:01:01 認識選擇器權重
• 000:02:06 選擇器權重的計算方式
• 000:03:35 選擇器權重的疊加
• 000:06:03 順序對權重的影響
• 000:07:51 inline 行內樣式對權重的影響
• 000:09:52 important 對權重的影響

相關參考：

• 教學文：CSS 選擇器的優先順序 ( 權重 )
• 影片連結：https://www.youtube.com/watch?v=W4_Ez5XbWuk

後記

說到 CSS 選擇器的權重，我是在寫這邊教學時才徹底搞懂的，過去雖然也常常接觸，也寫過類似的文章，但在完成這次的教學後，才真正明白了權重的概念，為什麼我會徹底了解了呢？因為我跑去閱讀了 W3C 的官方文件呀！真是排版非常不友善的文件呀...讀起來真的累...XD

總之，我個人覺得這篇 CSS 選擇器優先順序，除了 transition、animation、@layer 會有另外文章介紹他們自己的權重，其他應該是講解得非常完整啦，如果不嫌棄可以給個讚喔！

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html