1. 選擇器 (Selectors) 與 優先級對抗

邏輯前提：CSS 的覆蓋規則是基於權重計算。我們透過按鈕動態賦予/剝奪 HTML 標籤的 `id` 與 `class` 屬性，來觀察底層顏色的變化。

目前的文字顏色效果

即時 HTML 代碼狀態 (觀察變量的增減)：

<p id="demo-id" class="demo-target demo-class">目前的文字顏色效果</p>

2. 樣式位置 (Location) 與 絕對覆蓋

推導過程：不論外部樣式 (External) 的權重有多高，只要在 HTML 標籤內直接寫入 `style="..."` (行內樣式)，其權重為 1000，將絕對覆蓋其他設定。

這段文字原本受標籤規則控制 (黑色)。

<p id="inline-test" class="demo-target">...</p>

3. 核心屬性與盒模型 (Box Model)

操作變量，觀察下方「代碼視窗」與「視覺盒子」的即時同步。

盒子內容 (Content)
#target-box { ... }