先看這個例子
基本層用 #note 設紅色，較後的元件層則用 .note 設綠色。兩者都是一般作者宣告，沒有 !important。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 基本層 | #note 紅色 | 較前的層 |
| 元件層 | .note 綠色 | 較後的層勝出 |
| 計算結果 | 讀 color | rgb(0,80,40) |
瀏覽器怎樣處理
本例一般宣告先比較層次，再比較選擇器權重。這不表示層內樣式一定勝過未分層樣式。Important 宣告的層次優先方向相反，不屬本例。
一般未分層規則會勝過本例分層規則
反例加一條未分層 .note 規則。
<style>body{margin:8px}</style>
<style>@layer base,components;@layer base{#note{color:rgb(120,0,0)}}@layer components{.note{color:rgb(0,80,40)}}.note{color:rgb(80,0,100)}</style><p id="note" class="note">工作坊筆記</p>一般未分層宣告勝出，計算值為 rgb(80,0,100)。
試着修正
綠色勝出，是否證明 class 權重比 id 大？
查看參考答案
不是。這次先按層次分出勝負，尚未輪到權重比較。
- 先記來源、important 和層次，再比選擇器。
- 核對真正 color 值及完整規則脈絡。