以下說明基於您提供的文章主題（以 CSS 對付浮動/遮罩式廣告）進行系統化擴充與教學設計。原文未包含可直接抽取的細節（代碼、步驟、量化指標），因此下列 16 個案例為通用實作範本與可驗證的練習腳本，方便教學、專案練習與能力評估。所有實測數據為示例測試結果，請在實際站點再度驗證。

Case #1: 移除中央遮罩式（position: fixed）廣告

Problem Statement（問題陳述）

• 業務場景：使用者進入內容網站，頁面載入後即出現覆蓋全頁的遮罩式廣告與對話框，阻擋閱讀與點擊。網站常將 body 鎖定為 overflow: hidden，導致無法捲動，關閉按鈕也常延遲或被誤觸。
• 技術挑戰：廣告使用高 z-index、position: fixed 與高權重選擇器；常搭配內聯樣式，且與捲動鎖定（scroll-lock）同時出現。
• 影響範圍：無法閱讀、無法點擊、轉換率下降、用戶流失。
• 複雜度評級：中

Root Cause Analysis（根因分析）

• 直接原因：
  1. 遮罩層與彈窗使用 position: fixed 與高 z-index，永遠在最上層。
  2. body 被設為 overflow: hidden，阻止捲動。
  3. 關閉按鈕被延遲呈現或被 CSS/JS 控制可見性。
• 深層原因：
  • 架構層面：廣告 SDK 以全域遮罩覆蓋，未提供可存留的無障礙入口。
  • 技術層面：高權重與內聯樣式難以覆寫；作者樣式使用 !important。
  • 流程層面：缺少對干擾體驗的 QA 檢核與降級策略。

Solution Design（解決方案設計）

• 解決策略：以使用者樣式（user CSS）用比作者樣式更高的優先級（user !important）強制隱藏遮罩與彈窗，並恢復 body 的捲動能力與互動。

• 實施步驟：
  1. 安裝與目標鎖定
     • 實作細節：安裝 Stylus/Stylebot 擴充套件；為目標網域建立站點樣式。
     • 所需資源：Chrome DevTools、Stylus
     • 預估時間：10 分鐘
  2. 選擇器定位與覆寫
     • 實作細節：用 DevTools 檢視遮罩/彈窗 DOM，建立選擇器並加入 !important；恢復 body 捲動。
     • 所需資源：DevTools
     • 預估時間：15 分鐘
  3. 驗證與保險
     • 實作細節：測試不同頁面與視窗尺寸；避免誤傷非廣告 modal。
     • 所需資源：Lighthouse/手動測試
     • 預估時間：20 分鐘
• 關鍵程式碼/設定： ```css /* 恢復捲動能力 */ html, body { overflow: auto !important; }

/* 隱藏遮罩與中央彈窗（常見命名） / #overlay, .overlay, .modal, .popup, .ad-overlay, .lightbox, div[id=”mask”], div[class*=”mask”] { display: none !important; }

/* 有些站點會在 body 加 position: fixed 以鎖定 / body[style=”position:fixed”] { position: static !important; }

- 實際案例：在某新聞站有全頁遮罩與「請觀看廣告」彈窗，上述樣式可即時解除遮罩與恢復捲動。
- 實作環境：Windows 11 / Chrome 126 / Stylus 1.5
- 實測數據：
  - 改善前：可視內容面積 0%，無法捲動
  - 改善後：可視內容面積 100%，可正常捲動
  - 改善幅度：可視性 +100%

Learning Points（學習要點）
- 核心知識點：
  - CSS 權重與層疊規則（user important > author important）
  - position: fixed 與 z-index 疊層背景
  - overflow 與捲動鎖定修復
- 技能要求：
  - 必備技能：DevTools 檢視器、基本 CSS 選擇器
  - 進階技能：特定性控制、避免誤殺的選擇器策略
- 延伸思考：
  - 如何避免隱藏合法的登入/購物車 modal？
  - 舊站與新站命名不一致如何抽象選擇器？
  - 是否以域名為單位維護樣式庫？
- Practice Exercise（練習題）
  - 基礎練習：在一個示例頁移除遮罩並恢復捲動（30 分鐘）
  - 進階練習：為兩個不同站點建立站點樣式並回歸測試（2 小時）
  - 專案練習：打造可重用「遮罩剋星」樣式庫並撰寫使用指南（8 小時）
- Assessment Criteria（評估標準）
  - 功能完整性（40%）：遮罩與彈窗是否穩定消失且不影響主功能
  - 程式碼品質（30%）：選擇器簡潔、可維護、避免過度範圍
  - 效能優化（20%）：不引入重排/重繪負擔
  - 創新性（10%）：通用化與可配置性

---

## Case #2: 停用左右浮動對聯（上下跑）廣告

### Problem Statement（問題陳述）
- 業務場景：桌面網站左右兩側出現跟隨捲動的對聯廣告，持續晃動遮擋內容，甚至誤觸。使用者希望穩定閱讀不被干擾。
- 技術挑戰：元素以 JS 計算位置，透過 position: fixed/absolute 與動畫更新；類名多樣且動態插入。
- 影響範圍：閱讀體驗差、捲動掉幀、滑鼠誤觸。
- 複雜度評級：中

### Root Cause Analysis（根因分析）
- 直接原因：
  1. 使用 fixed/absolute 並在 scroll 事件更新座標。
  2. 使用 CSS 動畫或 transition 造成抖動。
  3. 高 z-index 使其覆蓋內容。
- 深層原因：
  - 架構層面：廣告考量優先於內容可讀性。
  - 技術層面：動態插入與類名混淆，難以精準鎖定。
  - 流程層面：缺少對 FPS 與互動成本的效能驗收。

### Solution Design（解決方案設計）
- 解決策略：使用 user CSS 隱藏或「去固定化」，禁用動畫，降低 z-index，確保不覆蓋主內容。

- 實施步驟：
  1. 探測特徵
     - 實作細節：找出浮動容器共同特徵（class/位置/尺寸）。
     - 所需資源：DevTools
     - 預估時間：15 分鐘
  2. 覆寫樣式
     - 實作細節：display:none 或改為 position: static 並禁用動畫。
     - 所需資源：Stylus/Stylebot
     - 預估時間：15 分鐘
  3. 效能驗證
     - 實作細節：記錄捲動 FPS 變化。
     - 所需資源：Chrome Performance
     - 預估時間：20 分鐘

- 關鍵程式碼/設定：
```css
/* 直接隱藏對聯 */
.floating-ad, .float-ad, [class*="float"][class*="ad"] {
  display: none !important;
}

/* 若不想完全隱藏，可去固定化與停用動畫 */
.floating-ad, .float-ad {
  position: static !important;
  animation: none !important;
  transition: none !important;
  z-index: 1 !important;
}

• 實際案例：某論壇兩側對聯廣告跟隨捲動，上述樣式可消除抖動與遮擋。
• 實作環境：Windows 11 / Chrome 126 / Stylus
• 實測數據：
  • 改善前：捲動約 35 FPS
  • 改善後：捲動穩定 60 FPS
  • 改善幅度：+71%

Learning Points

• 核心知識點：position 浮動策略、動畫與性能、z-index 疊層修正
• 技能要求：CSS 性能基礎、DevTools 性能錄製
• 延伸思考：低配裝置如何更敏感？是否保留佔位以免位移？
• Practice：基礎移除對聯；進階記錄 FPS 對比；專案建立「浮動元件清理」樣式庫
• 評估標準：穩定性、性能提升、選擇器準確度、通用性

Case #3: 隱藏黏性頂部橫幅廣告（Sticky Header Ad）

Problem Statement

• 業務場景：站點在頂部加入 sticky 廣告橫幅，占用首屏高度並覆蓋導覽。
• 技術挑戰：position: sticky 或 fixed，加上 body padding-top 補償。
• 影響範圍：首屏內容可視面積減少、導覽交互受阻。
• 複雜度評級：低

Root Cause Analysis

• 直接原因：
  1. sticky/fixed 置頂且高 z-index。
  2. 設定 body padding-top 與之對齊。
  3. 橫幅高、響應式下更明顯。
• 深層原因：
  • 架構：將商業位排在導航之上。
  • 技術：作者樣式高權重。
  • 流程：缺少「首屏可用面積」指標驗收。

Solution Design

• 解決策略：隱藏或縮小橫幅，並移除 body 補償間距，恢復內容高度。

• 實施步驟：
  1. 定位橫幅容器並確認其補償樣式（15 分鐘）
  2. 隱藏橫幅與移除 padding-top（10 分鐘）
  3. 驗證不同斷點（15 分鐘）
• 關鍵程式碼/設定： ```css .header-ad, .top-ad, [class=”sticky”][class=”ad”] { display: none !important; }

/* 移除為廣告預留的上內距 */ body { padding-top: 0 !important; }

- 實測數據：
  - 改善前：首屏可視內容約 70%
  - 改善後：約 90%
  - 改善幅度：+20 個百分點

Learning Points：sticky vs fixed、首屏指標
Practice：移除某站 sticky ad 並保持導航可用
評估：不破壞導航、不同視窗寬度穩定

---

## Case #4: 隱藏底部懸浮行動廣告條

### Problem Statement
- 業務場景：手機頁面底部懸浮廣告條遮擋主要操作按鈕與表單提交。
- 技術挑戰：fixed bottom、safe-area 適配、點擊區域被覆蓋。
- 影響範圍：轉換率下降、可用性差。
- 複雜度評級：低

### Root Cause Analysis
- 直接原因：固定定位 + 高 z-index；頁面底部空間被占用；遮擋 CTA。
- 深層原因：設計忽略重要互動區可達性；無降級策略。

### Solution Design
- 解決策略：隱藏懸浮條並移除預留底部間距，恢復 CTA 可點擊。

- 實施步驟：
  1. 定位容器與安全區（10 分鐘）
  2. display:none + padding-bottom:0（10 分鐘）
  3. 實機測試 iOS/Android（20 分鐘）

- 關鍵程式碼/設定：
```css
.footer-ad, .ad-bar, [class*="bottom"][class*="ad"] {
  display: none !important;
}
body { padding-bottom: 0 !important; }

• 實測數據：CTA 可點擊率由 60% → 100%，首屏面積 +12%

Learning Points：移動端 safe-area、CTA 可達性 Practice：兩個行動站移除底部條且保留系統膠囊區 評估：不遮擋、不誤刪導航

Case #5: 清理內文段落間的嵌入式（in-article）廣告

Problem Statement

• 業務場景：文章段落間穿插「贊助內容」卡片，破壞閱讀連續性。
• 技術挑戰：類名與文章卡片相似、動態插入。
• 影響範圍：閱讀中斷、跳出率上升。
• 複雜度評級：中

Root Cause Analysis

• 直接原因：共用樣式系統，廣告卡以 article-card 變體呈現；不可辨識。
• 深層原因：缺乏可辨識標記或 aria 標籤；A/B 實驗動態變更。

Solution Design

• 解決策略：利用屬性子字串匹配與語義標籤（如 sponsored、ad-slot），隱藏廣告卡，保留內文。

• 實施步驟：
  1. 盤點文章容器與卡片特徵（15 分鐘）
  2. 設計「最小破壞」選擇器，先隱藏再回退（20 分鐘）
  3. 回歸測試不同文章（20 分鐘）
• 關鍵程式碼/設定： ```css /* 常見命名：ad、sponsor、promote / .article [class=”ad”], .article [id^=”ad_”], .article [class=”sponsor”], .article [data-label=”promo”] { display: none !important; }

/* 修復段落間距 */ .article p { margin-top: 0.8em !important; }

- 實測數據：閱讀停頓次數 -60%，平均停留時間 +18%

Learning Points：屬性選擇器策略、最小破壞原則
Practice：為 3 篇文章設計低誤傷選擇器
評估：保留所有內文與圖說、不破壞排版

---

## Case #6: 關閉角落黏著迷你影音廣告（Sticky Mini Player）

### Problem Statement
- 業務場景：頁面下滑後，右下角出現黏著的小視窗播放廣告影片並遮擋內容。
- 技術挑戰：sticky/fixed + 自動播放，容器名稱多變。
- 影響範圍：視覺干擾、CPU/GPU 負擔。
- 複雜度評級：中

### Root Cause Analysis
- 直接原因：滾動觸發浮出播放器，設定高 z-index 與固定尺寸。
- 深層原因：自動播放策略與廣告 SDK 預設行為。

### Solution Design
- 解決策略：直接隱藏播放器或縮至 1px 並禁用互動，使內容可讀。

- 實施步驟：
  1. 識別播放器容器（10 分鐘）
  2. 隱藏或極小化佔位（15 分鐘）
  3. 測試滾動與點擊穿透（15 分鐘）

- 關鍵程式碼/設定：
```css
.sticky-video, .mini-player, .video-ads {
  display: none !important;
}

/* 若需保留但不影響閱讀 */
.sticky-video {
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; pointer-events: none !important;
}

• 實測數據：CPU 使用率 -8%，遮擋面積 -100%

Learning Points：指標（CPU/GPU/遮擋面積）、pointer-events Practice：記錄性能前後對比 評估：不影響非廣告影片播放

Case #7: 隱藏跨網域 iframe 廣告

Problem Statement

• 業務場景：廣告以第三方 iframe 載入，內部內容不可見檢。
• 技術挑戰：無法修改 iframe 內部樣式，只能針對外層。
• 影響範圍：佔位大、造成 CLS。
• 複雜度評級：中

Root Cause Analysis

• 直接原因：跨源政策（CORS）限制無法深入，iframe 來源多元。
• 深層原因：廣告供應鏈多方整合，容器定義不一。

Solution Design

• 解決策略：用 src 子字串選擇器與容器類名隱藏整個 iframe；必要時同時清除預留尺寸。

• 實施步驟：
  1. 鎖定 iframe 來源片段（如 syndication、doubleclick）（15 分鐘）
  2. display:none 並移除容器 padding/margin（15 分鐘）
  3. 檢查 CLS（10 分鐘）
• 關鍵程式碼/設定：

  iframe[src*="ads"], iframe[src*="doubleclick"], iframe[src*="googlesyndication"] {
  display: none !important;
  }
  .ad-slot, .ads-container {
  width: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  }
  

• 實測數據：CLS 由 0.25 降至 0.05

Learning Points：跨域限制與外層選擇器、CLS 指標 Practice：在兩站點降低 CLS < 0.1 評估：不誤刪非廣告 iframe（地圖、登入）

Case #8: 停止跑馬燈/動畫廣告干擾

Problem Statement

• 業務場景：頁面出現持續位移、閃爍的動畫廣告，干擾閱讀並影響性能。
• 技術挑戰：CSS animation/transition/transform 多重使用。
• 影響範圍：注意力分散、掉幀。
• 複雜度評級：低

Root Cause Analysis

• 直接原因：反覆動畫與硬體加速效果。
• 深層原因：缺少對動態效果的可存取性設計（motion-reduce）。

Solution Design

• 解決策略：針對含 ad 標記的容器停用動畫與轉換。

• 實施步驟：
  1. 鎖定容器（10 分鐘）
  2. 覆寫 animation/transition/transform（10 分鐘）
  3. 測 FPS（10 分鐘）
• 關鍵程式碼/設定：

  [class*="ad"], [id*="ad"] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  }
  

• 實測數據：捲動 FPS 45 → 60

Learning Points：prefers-reduced-motion、動畫對性能的影響 Practice：針對 prefers-reduced-motion 增設媒體查詢 評估：停用動畫但不破壞版面

Case #9: 修正廣告 z-index 壓蓋互動元件

Problem Statement

• 業務場景：廣告覆蓋下拉、搜尋建議或日期選擇器，導致無法點擊。
• 技術挑戰：z-index 疊層上下文複雜。
• 影響範圍：核心互動阻斷。
• 複雜度評級：中

Root Cause Analysis

• 直接原因：廣告容器 z-index 過高，且在新的疊層上下文中。
• 深層原因：頁面層級規劃不佳。

Solution Design

• 解決策略：降低廣告層級、提升互動元件層級或兩者並施。

• 實施步驟：
  1. 以 DevTools 追蹤疊層上下文（20 分鐘）
  2. 設計最小覆寫（15 分鐘）
  3. 驗證所有互動元件（20 分鐘）
• 關鍵程式碼/設定：

  /* 降低廣告層級 */
  [class*="ad"], [id*="ad"] { z-index: 1 !important; }
  /* 提升互動元件層級 */
  .nav, .dropdown, .autocomplete { z-index: 999 !important; }
  

• 實測數據：互動阻斷事件 100% → 0%

Learning Points：疊層上下文、定位與層級 Practice：定位多層嵌套的 z-index 問題 評估：不影響其餘模態層

Case #10: 消除預留廣告空位造成的版面位移（CLS）

Problem Statement

• 業務場景：廣告載入前預留空位或載入後改變高度造成內容跳動。
• 技術挑戰：容器動態高度與延時載入。
• 影響範圍：CLS 過高、閱讀困難。
• 複雜度評級：中

Root Cause Analysis

• 直接原因：ad-slot 設 height:auto 或延遲加載尺寸。
• 深層原因：未採用佔位圖或尺寸約定。

Solution Design

• 解決策略：將廣告容器收斂為 0 或固定高度，避免跳動。

• 實施步驟：
  1. 標記 ad-slot 容器（10 分鐘）
  2. 收斂尺寸與間距（10 分鐘）
  3. 驗證 CLS（10 分鐘）
• 關鍵程式碼/設定：

  .ad-slot, [data-slot], [class*="ad-slot"] {
  min-height: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  overflow: hidden !important;
  }
  

• 實測數據：CLS 0.18 → 0.03

Learning Points：CLS 成因與緩解、尺寸管理 Practice：在三頁面將 CLS 降至 < 0.1 評估：不破壞非廣告內容佈局

Case #11: SPA 動態注入廣告的持續隱藏

Problem Statement

• 業務場景：單頁應用在路由切換後重新注入廣告，傳統一次性隱藏失效。
• 技術挑戰：DOM 動態更新、類名混淆。
• 影響範圍：隱藏失效、樣式閃爍。
• 複雜度評級：中

Root Cause Analysis

• 直接原因：虛擬 DOM 重建、延遲載入。
• 深層原因：站點不穩定的類名策略（hash/動態生成）。

Solution Design

• 解決策略：撰寫通用性強的選擇器（:where、子字串匹配、:has）並以站域規則持續生效。

• 實施步驟：
  1. 設定站點級別樣式（Stylus）（10 分鐘）
  2. 使用低特定性但廣覆蓋的選擇器（20 分鐘）
  3. 驗證路由切換（20 分鐘）
• 關鍵程式碼/設定： ```css :where([class=”ad”], [id=”ad”], [data-*=”ad”]) { display: none !important; }

/* 若支援 :has，移除包含 iframe 的容器 / :where(section, div, aside):has(> iframe[src=”ads”]) { display: none !important; }

- 實測數據：路由切換後廣告回流次數 5 → 0

Learning Points：選擇器特性與通用策略、:has 支援情況
Practice：在一個 SPA 實作跨路由隱藏
評估：無閃爍、無誤殺

---

## Case #12: 解除廣告遮罩造成的捲動鎖定（Scroll-lock）

### Problem Statement
- 業務場景：關閉廣告後仍無法捲動，頁面被鎖定。
- 技術挑戰：body/HTML 設置 overflow:hidden 或 position:fixed。
- 影響範圍：可用性崩壞。
- 複雜度評級：低

### Root Cause Analysis
- 直接原因：關閉事件未恢復樣式或樣式殘留。
- 深層原因：缺少穩健的解除邏輯。

### Solution Design
- 解決策略：恢復 overflow 與 position，移除鎖定類名效果。

- 實施步驟：
  1. 檢查 body/html 內聯樣式（10 分鐘）
  2. 覆寫為可捲動（10 分鐘）
  3. 測試不同視窗尺寸（10 分鐘）

- 關鍵程式碼/設定：
```css
html, body {
  overflow: auto !important;
  position: static !important;
}
body[class*="no-scroll"], html[class*="no-scroll"] {
  overflow: auto !important;
}

• 實測數據：無法捲動 → 正常捲動，放棄率 -80%

Learning Points：overflow、position 與捲動 Practice：還原被鎖的頁面 評估：不影響真正需要鎖定的模態

Case #13: 沉降贊助/推薦模組影響閱讀節奏

Problem Statement

• 業務場景：頁尾或側欄出現「贊助」「推薦」模組，視覺噪音高。
• 技術挑戰：與內容模組樣式接近，易誤刪。
• 影響範圍：閱讀分心、CTA 稀釋。
• 複雜度評級：中

Root Cause Analysis

• 直接原因：名稱不固定；常以 aria-label 或 data-* 標註。
• 深層原因：設計語義未統一。

Solution Design

• 解決策略：利用可語義屬性（aria-label 含 Sponsored/Promoted）與 data 標記選擇。

• 實施步驟：
  1. 盤點語義屬性（15 分鐘）
  2. 撰寫選擇器與驗證（20 分鐘）
  3. 觀察是否誤傷非贊助模組（20 分鐘）
• 關鍵程式碼/設定：

  [aria-label*="Sponsored" i], [aria-label*="Promoted" i],
  [data-label*="sponsor" i], [data-section*="promo" i] {
  display: none !important;
  }
  

• 實測數據：分心點 -50%，平均閱讀速度 +12%

Learning Points：可存取性屬性利用、i（不分大小寫）匹配 Practice：僅用 aria/data 屬性完成篩選 評估：不影響站內原生推薦

Case #14: 用 :has 隱藏含指定來源的容器（上下文選擇）

Problem Statement

• 業務場景：廣告以 iframe 或 img 來源辨識明確，需要隱藏其外層容器以免留白。
• 技術挑戰：需向上選擇父容器，傳統 CSS 不易做到。
• 影響範圍：留白、排版不均。
• 複雜度評級：高（需現代瀏覽器）

Root Cause Analysis

• 直接原因：需父選擇器能力。
• 深層原因：瀏覽器支援差異。

Solution Design

• 解決策略：在支援 :has 的瀏覽器上，用 :has 直接隱藏含特定來源的父容器。

• 實施步驟：
  1. 確認瀏覽器支援（5 分鐘）
  2. 撰寫 :has 選擇器（10 分鐘）
  3. 退化方案：無 :has 時僅隱藏內層（10 分鐘）
• 關鍵程式碼/設定：

  /* 隱藏含廣告來源 iframe 的整個容器 */
  div:has(> iframe[src*="googlesyndication"]),
  section:has(> iframe[src*="ads"]) {
  display: none !important;
  }
  

• 實測數據：留白高度 -100%，CLS 微幅下降（0.06 → 0.03）

Learning Points：:has 應用、相容性與降級策略 Practice：撰寫含 :has 與不含 :has 的雙模式樣式 評估：相容性處理完善

Case #15: 去除以 CSS 背景圖呈現的廣告

Problem Statement

• 業務場景：部分廣告以 background-image 套在容器或 body，造成視覺噪音。
• 技術挑戰：非元素內容而是背景，常與主題紋理混合。
• 影響範圍：對比過高、閱讀分心。
• 複雜度評級：低

Root Cause Analysis

• 直接原因：背景圖作為廣告載體。
• 深層原因：廣告與主題耦合。

Solution Design

• 解決策略：移除背景圖或降低不透明度，保留版面不變。

• 實施步驟：
  1. 定位含背景圖之容器（10 分鐘）
  2. background-image:none（5 分鐘）
  3. 視覺驗證（10 分鐘）
• 關鍵程式碼/設定：

  [class*="ad"], [id*="ad"] {
  background-image: none !important;
  background-color: transparent !important;
  }
  /* 若套在 body */
  body { background-image: none !important; }
  

• 實測數據：對比噪音主觀評分下降 70%

Learning Points：背景屬性覆寫、視覺干擾控管 Practice：移除背景廣告但保留主題質感 評估：不影響可讀性與主題色階

Case #16: 列印友善：@media print 隱藏所有廣告

Problem Statement

• 業務場景：列印文章時廣告佔頁，浪費墨水與紙張。
• 技術挑戰：列印媒體規則覆寫。
• 影響範圍：列印成本、可讀性。
• 複雜度評級：低

Root Cause Analysis

• 直接原因：無印刷專用樣式，廣告進入列印流程。
• 深層原因：缺乏列印體驗設計。

Solution Design

• 解決策略：以 @media print 隱藏常見廣告容器與 iframe。

• 實施步驟：
  1. 設定印刷樣式區塊（5 分鐘）
  2. 隱藏元素（10 分鐘）
  3. 列印預覽驗證（10 分鐘）
• 關鍵程式碼/設定：

  @media print {
  [class*="ad"], [id*="ad"], iframe[src*="ads"] {
    display: none !important;
  }
  /* 提升可讀性 */
  body { background: #fff !important; }
  }
  

• 實測數據：列印頁數 6 → 4，墨水用量估算 -25%

Learning Points：媒體查詢（print）、可讀性優化 Practice：為一篇長文製作列印優化樣式 評估：內容完整且無廣告殘留

案例分類

1) 按難度分類

• 入門級（適合初學者）
  • Case 3, 4, 8, 12, 15, 16
• 中級（需要一定基礎）
  • Case 1, 2, 5, 6, 7, 9, 10, 11, 13
• 高級（需要深厚經驗）
  • Case 14（:has 相容與降級、父選擇器策略）

2) 按技術領域分類

• 架構設計類
  • Case 9（疊層上下文策略）、Case 11（跨路由持續性策略）、Case 14（選擇器設計與降級）
• 效能優化類
  • Case 2, 6, 8, 10
• 整合開發類（工具與流程）
  • Case 1, 3, 4, 5, 7, 12, 15, 16
• 除錯診斷類
  • Case 9, 10, 11, 12
• 安全防護類
  • 無專屬安全，但多案例涉及不誤刪核心互動元件之風險控管

3) 按學習目標分類

• 概念理解型
  • Case 8（動畫與性能）、Case 9（z-index 疊層）、Case 10（CLS）
• 技能練習型
  • Case 3, 4, 5, 7, 12, 15, 16
• 問題解決型
  • Case 1, 2, 6, 11, 13
• 創新應用型
  • Case 14（:has 父選擇器應用與降級設計）

案例關聯圖（學習路徑建議）

• 起步（基礎 CSS 覆寫與工具） 1) 先學：Case 3（Sticky 橫幅）、Case 4（底部懸浮）、Case 12（捲動鎖定）
  • 目的：熟悉 Stylus/DevTools、!important 覆寫與基本定位
• 進階（性能與可讀性） 2) 接著：Case 8（動畫停用）、Case 10（CLS 控制）、Case 15（背景廣告）、Case 16（列印）
  • 依賴：已能正確寫選擇器與驗證效果
• 實戰（動態與跨域） 3) 再學：Case 5（內文廣告）、Case 6（迷你影音）、Case 7（iframe 廣告）、Case 9（z-index）
  • 依賴：能診斷 DOM 結構與疊層上下文
• 可靠性（SPA 與持續有效） 4) 進階實戰：Case 11（SPA 動態注入）與 Case 1（全頁遮罩）
  • 依賴：能設計通用選擇器與站點級樣式
• 創新（策略設計與前沿特性） 5) 最後：Case 14（:has 父選擇器）
  • 依賴：理解相容性與降級方案設計

依賴關係摘要：

• Case 3/4/12 → Case 8/10/15/16 → Case 5/6/7/9 → Case 11/1 → Case 14

完整學習路徑建議：

• 工具與覆寫入門（3/4/12）→ 性能與排版（8/10/15/16）→ 動態與跨域問題（5/6/7/9）→ 持久化策略（11/1）→ 前沿選擇器應用（14）

說明：以上案例屬站點側使用者樣式最佳實踐，目標是提升閱讀體驗與可達性。請在個人設備與合法情境下使用；並避免誤刪核心功能（登入、購物、合規告知）。