靠 CSS , 除掉討厭的廣告
摘要提示
- 主題: 介紹如何用 CSS 對付網頁上惱人的廣告元素
- 延伸脈絡: 承接前一篇「用 CSS 放大縮小網頁」的技巧與思路
- 廣告型態: 針對會上下移動或遮蔽頁面中央的浮動廣告
- 解法方向: 透過自訂 CSS 覆寫樣式來隱藏或抑制廣告顯示
- 目標讀者: 對前端調整與瀏覽體驗優化有興趣的使用者與開發者
- 實務目的: 改善閱讀時被廣告干擾的問題，提升網頁可讀性
- 文內結構: 短文引介主題與問題場景，提供全文連結
- 參考連結: 附上全文網址以取得詳細步驟與示例
- 作者態度: 針對惱人廣告表達強烈不滿，主張以技術手段解決
全文重點
本文延續作者先前以 CSS 操作網頁呈現（如放大縮小）的文章思路，進一步提出以 CSS 來「去除或抑制」網頁上惱人的廣告。作者特別點名兩類最干擾使用者閱讀的型態：一是會在視窗中上下滑動、持續吸睛的浮動廣告；二是非彈出視窗形式、但直接覆蓋在頁面中央、阻礙主要內容閱讀的疊加式廣告。這些廣告常以定位與高層級疊放顯示於畫面中，使使用者難以專注於頁面內容。
針對這種情況，作者提出「用 CSS 對付它」的方向：透過自行撰寫或覆寫樣式，讓這些廣告元素不再顯示或不再遮擋內容，藉此恢復正常閱讀體驗。雖然本文本身沒有鋪陳詳細的 CSS 選擇器與屬性操作，但強調了「同樣的 CSS 技巧也能應用於移除廣告」的思路，呼應其前文在樣式層面調整頁面行為的做法。
文章篇幅簡短、旨在引介問題與解法路徑，並附上全文連結，方便讀者前往詳細篇章查看具體步驟、設定方式與可能的應用範例。整體主軸是藉由前端樣式（CSS）來掌控頁面視覺呈現，減少侵入式廣告造成的干擾，達成更佳的閱讀與瀏覽品質。
段落重點
靠 CSS , 除掉討厭的廣告
- 內容摘要: 作者延續前一篇「用 CSS 放大縮小網頁」的概念，提出以 CSS 來對抗惱人的廣告，特別是會上下跑動或覆蓋頁面中央的浮動廣告。文章指出這些廣告會阻礙正常閱讀，而 CSS 可以成為對策，用以覆寫廣告元素的呈現，讓其不再干擾。本文作為引介，重點在於提出方向與提供全文連結，詳細操作與示例需至所附的完整文章查看。
資訊整理
知識架構圖
- 前置知識：
- 基本 HTML 結構（元素、屬性、階層）
- CSS 基礎（選擇器、層疊與優先度、盒模型、display/position/z-index）
- 瀏覽器開發者工具的基本操作（檢查元素、查看樣式）
- 核心概念：
- 使用自訂 CSS 覆寫網站樣式：以更高優先度或更精準選擇器，改寫廣告容器的呈現
- 鎖定廣告容器：辨識常見的廣告區塊（浮動、捲動、遮罩式 overlay）
- 影響呈現的關鍵屬性：display、visibility、position、z-index、overflow
- 站點專屬與全域規則：對特定網站與跨站共通樣式的策略
- 穩定性與不破版：移除廣告同時避免破壞版面與互動
- 技術依賴：
- 瀏覽器對自訂樣式的支持（使用者樣式表、Stylus/Stylebot 等擴充、或 uBlock 的 Cosmetic filters）
- CSS 選擇器與優先度機制（ID > class > element、!important 的取捨）
- 動態 DOM/類名的處理（避免易碎選擇器、使用屬性/結構選擇器）
- 應用場景：
- 移除浮動/固定在側邊或上下的廣告條與跟隨式廣告
- 關閉遮罩式（非彈窗）覆蓋在頁面正中央的廣告層
- 隱藏內容區塊中的推薦卡、贊助連結、側欄廣告位
- 限縮因廣告占位造成的空白與捲動干擾
學習路徑建議
- 入門者路徑：
- 了解基本 CSS 選擇器（元素、class、ID）與 display:none 的效果
- 安裝一個管理自訂樣式的瀏覽器擴充（如 Stylus），嘗試為單一網站撰寫簡單的隱藏規則
- 用開發者工具檢查元素，找出廣告容器的 class/ID 並做站點專屬隱藏
- 進階者路徑：
- 學會使用更進階的選擇器（屬性選擇器、後代/相鄰選擇器、:has 支援時的應用）
- 調整 position、z-index、overflow 以消除覆蓋層或阻止干擾但不破版
- 建立可維護的規則集：命名、註解、站點分組；避免過度依賴 !important
- 實戰路徑：
- 建立個人「使用者樣式庫」，針對常逛站點持續優化
- 對付動態類名/AB 測試：以結構、屬性與特徵選擇器撰寫較穩健的規則
- 與廣告過濾器的 Cosmetic filters 協作（如 uBlock Origin），在無法攔截請求時以 CSS 美化過濾
- 回歸測試各頁面與裝置尺寸，確保無副作用（如遮擋導航、影響卷動）
關鍵要點清單
- 鎖定廣告容器：先用開發者工具找到最外層廣告元素再下手，降低破版風險 (優先級: 高)
- display:none 與 visibility:hidden：前者移除占位，後者保留空間，依情境選用 (優先級: 高)
- 覆寫浮動/固定廣告：對 position: fixed/absolute 的遮罩改為 display:none 或調整 z-index/position (優先級: 高)
- 優先度與 !important：以更精準選擇器優先，!important 作為最後手段 (優先級: 高)
- 站點專屬規則：將樣式限定在特定網域，避免誤傷其他網站 (優先級: 高)
- 避免易碎選擇器：少用易變的動態 class，改用結構或屬性選擇器提升穩定性 (優先級: 中)
- 保持版面完整：移除廣告後檢查是否需補齊間距或調整容器寬高 (優先級: 中)
- 處理捲動/追蹤條：針對跟隨式側欄或頂部條，移除或調整高度與定位 (優先級: 中)
- 阻止互動遮擋：若遮罩攔截點擊，可將 pointer-events:none 或直接隱藏 (優先級: 中)
- 監控變動 DOM：對於 SPA/動態載入內容，可配合擴充的自動注入或使用更廣義選擇器 (優先級: 中)
- 測試跨裝置：在不同解析度與行動版檢查規則是否仍然生效 (優先級: 中)
- 管理與註解：為每條規則標註網站、目的與日期，便於維護 (優先級: 低)
- 效能考量：避免過度深層或複雜選擇器，保持選擇器簡潔 (優先級: 低)
- 法規與道德：理解移除廣告對網站營收的影響，權衡體驗與支持創作者 (優先級: 低)
- 替代工具：必要時結合廣告攔截器的 Cosmetic filters，以規模化管理規則 (優先級: 中)
