先看這個例子
lesson 上層把 --ink 設綠色，alternate 子範圍改成紫色。三段都用 color:var(--ink)。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 第一段 | 解算沿用的 --ink | 沿用 lesson 的綠色 |
| 內層段落 | 解算最近的 --ink | 沿用 alternate 的紫色 |
| 最後同級段落 | 查自己的上層路徑 | 仍是綠色，alternate 不在其上層 |
瀏覽器怎樣處理
未註冊 custom property 預設會沿用。每個元素按自己的上層路徑解算，所以局部覆寫不會改到範圍以外的同級元素。這個名稱是 CSS token，不是已儲存的應用設定。
改上層 token，沒有另覆寫的後代都會變
反例在 lesson 上層設紫色，移除局部覆寫。
<style>body{margin:8px}</style>
<style>.lesson{--ink:rgb(80,0,100)}p{color:var(--ink)}</style><section class="lesson"><p>預設筆記</p><section><p>局部筆記</p></section><p>另一段預設筆記</p></section>三段全部變紫色，未能做到只改局部。
試着修正
最後段落會否沿用前一個同級 alternate 範圍的值？
查看參考答案
不會。沿用按上層關係，不按前面的同級元素；它收到 lesson 上層綠色。
- 記三個計算色值及 token 上層路徑。
- CSS 沿用與已儲存業務設定沿用不要混為一談。