在上一篇文章中，我們介紹了基本選擇器的優先順序。不過開發中也經常遇到多個選擇器的組合時（如 ul li 、 div.appx a 等），或遇到一些套件的樣式，想改樣式卻怎麼蓋都蓋不掉，這時候樣式的優先級計算變得更加重要。本篇文章將進一步說明如何計算這些複合選擇器的權重，以便更好地控制和覆蓋樣式。
💠 權重計算
每個選擇器都有自己的權重，可以用 (a, b, c) 來表示：
- a：ID 選擇器的數量
- b：類選擇器、偽類選擇器、屬性選擇器的數量
- c：元素選擇器和偽元素選擇器的數量
範例計算
比較規則為：從左至右比較，每一部分權重高者勝出。例如 (1, 0, 0) > (0, 2, 3)
範例一：#header .nav-item a
- a：1 個 ID 選擇器
#header - b：1 個類選擇器
.nav-item - c：1 個元素選擇器
a
權重： (1, 1, 1)
範例二：div#main .content p:first-child
- a：1 個 ID 選擇器
#main - b：1 個類選擇器
.content+ 1 個偽類選擇器:first-child - c：2 個元素選擇器
div,p
權重：(1, 2, 2)
範例三：article[role="main"] .btn:hover::before
- a：0 個 ID 選擇器
- b：1 個屬性選擇器
[role="main"]+ 1 個類選擇器.btn+ 1 個偽類選擇器:hover - c：1 個偽元素選擇器
::before+ 1 個元素選擇器article
權重：(0, 3, 2)
在這三個範例中，權重最高的是範例二的 div#main .content p:first-child，權重為 (1, 2, 2)。
💠 VS Code 的權重計算提示
雖然了解如何手動計算權重非常重要，不過要自行計算權重有時又有點麻煩，有個更簡單的方式，讓我們完全無需計算權重，就是 VS Code 很貼心的幫我們算好了！
在 CSS 檔案中，只需將游標移至 CSS 選擇器上，VS Code 會直接顯示該選擇器的權重
如此一來就不用自己去計算權重啦！節省了大量時間和精力！
💠 總結
複合選擇器的權重計算是 CSS 優先級控制的關鍵，理解這些計算方式能幫助開發者在處理複雜樣式時更輕鬆地解決樣式衝突問題，VS Code 的自動權重提示也使得這個過程更加便捷。
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！
🚀線上課程分享
線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程想學習更多關於前後端的線上課程，可以參考看看。
Hahow
Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住
六角學院
如果你是初學者，非常推薦六角學院哦！剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！
Udemy
Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！也是很多工程師推薦的線上課程網站。
