<style>
.main { width:200px; height:200px; background:black; }
.main ul li { background:white; } /* A */
.on { background:blue; } /* B */
</style>
<div class="main">
<ul>
<li class="on">第一行文字為什麼不是藍色?</li> /* 實際顯示白色 */
<li>第二行</li>
</ul>
</div>優先級由四元組 (a, b, c, d) 表示：
比較規則：從左到右逐位比較，高位優先。!important 最高 (1,0,0,0,0) 但不建議濫用。
| 選擇器 | 形式 | a | b | c | d | 權重值 |
|---|---|---|---|---|---|---|
| .main ul li | 類 + 元素 + 元素 | 0 | 0 | 1 | 2 | 0,0,1,2 = 12 |
| .on | 類 | 0 | 0 | 1 | 0 | 0,0,1,0 = 10 |
| #on | ID | 0 | 1 | 0 | 0 | 0,1,0,0 = 100 |
結論：.main ul li (12) > .on (10)，故白色覆蓋藍色。改用 ID 選擇器 `#on (100)` 則藍色生效。
| 誤區 | 事實 |
|---|---|
| 「類選擇器永遠比元素選擇器優先」 | ❌ .class (0,0,1,0) vs div div div div (0,0,0,4) → 類優先。但 .a .b .c .d .e (0,0,5,0) vs #id (0,1,0,0) → ID 優先 |
| 「後寫的樣式優先」 | ❌ 僅在優先級相等時生效 (後來者勝) |
| 「內部樣式表 > 外聯樣式表」 | ❌ 優先級與引入方式無關，僅看選擇器權重 |
| 「權重可簡化為數字相加」 | ❌ 進制非十進制，256 個類選擇器也無法超越 1 個 ID |
npx specificity-calculator ".main ul li"
