在上一篇文章中，我們介紹了基本選擇器的優先順序。不過開發中也經常遇到多個選擇器的組合時（如 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 的自動權重提示也使得這個過程更加便捷。

💠 完賽心得

很開心今年可以完賽，去年太忙碌要報名時發現已截止了😆
今年回到初心選擇了初學的 CSS 主題，因為在 8 月時有開了一個 RWD 切版新手班，發現 CSS 選擇器對於初學者學習來說會是比較困難的，希望本系列可以幫助初學者對於學習 CSS 選擇器有更好的理解。

希望明年也可以持續參賽～💪

IT 鐵人賽完賽！明年再見囉！

本文將同步更新至 Lala Code