← 全部文章

教程

用 CSS 屏蔽展示广告和赞助框

17 5月 2026 · 作者 JustZix Team

专用的广告拦截器很不错,但有时你只想去掉几个特定的广告位——视频下方的粘性横幅、塞满赞助链接的"推荐"框、文章上方的巨型通栏。JustZix 让你用纯 CSS 隐藏它们。

CSS 隐藏与网络拦截的区别

传统广告拦截器在网络层阻止广告请求。CSS 隐藏不同:广告可能仍会加载,但你永远看不见它。这听起来更差,但它有真正的优势。CSS 规则永远不会像被拦截的请求那样破坏网站布局,它们写起来非常简单,而且能作用于网络拦截器漏掉的广告位——比如发布商自己的、与文章同域提供的"赞助"框。

配方 1:隐藏标准广告容器

展示广告行业在少数广告位尺寸和类名上趋于标准化。这条规则横扫常见的那些。

/* 标准展示广告位 */
[id^="ad-"], [id*="-ad-"], [id$="-ad"],
[class*="ad-slot"], [class*="ad-banner"],
[class*="advert"], [class*="ad-container"],
ins.adsbygoogle, iframe[src*="doubleclick"],
iframe[src*="googlesyndication"] {
  display: none !important;
}

属性选择器 [id^="ad-"]、[id*="-ad-"] 和 [id$="-ad"] 分别匹配 id 的开头、中间和结尾,能分别捕获 ad-top、main-ad-rail 和 sidebar-ad。

配方 2:折叠空白空间

用 display: none 隐藏广告通常也会移除它占用的空间,但预留的广告位有时会在父元素上设置固定高度。如果你看到一道空白间隙,就把它折叠掉。

/* 折叠预留的广告空间 */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

配方 3:剥离"赞助"和"推广"框

发布商提供的赞助内容是网络拦截器最难捕获的一种,因为它来自与真正文章相同的服务器。CSS 可以通过这些块所带的标签来定位它。

/* 赞助 / 推广内容块 */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
  display: none !important;
}

Taboola 和 Outbrain——两大"网络周边"小部件网络——命名很可靠,所以这些选择器能清掉新闻网站上文章底部的大部分杂物。

配方 4:针对动态注入广告的 JS 清扫

有些广告脚本在首次绘制后注入广告位。一小段 JavaScript 规则会在它们出现时持续清除。

// 持续移除注入的广告节点
const AD_HINTS = ['sponsored', 'advert', 'ad-slot', 'taboola', 'outbrain'];

function clearAds() {
  document.querySelectorAll('div, aside, section, iframe').forEach(el => {
    const tag = (el.id + ' ' + el.className).toLowerCase();
    if (AD_HINTS.some(h => tag.includes(h))) {
      el.remove();
    }
  });
}

clearAds();
new MutationObserver(clearAds)
  .observe(document.body, { childList: true, subtree: true });

避免破坏网站

CSS 广告隐藏是安全的,但上面有两个选择器比较宽泛。如果某个网站丢失了真正的内容,就收窄规则:

• 把 [class*="ad-banner"] 替换为你在开发者工具里看到的确切类名。
• 用像 https://site.example/* 这样的模式把规则限定到一个域名。
• 保留一条独立的、安全的全局规则,把激进的选择器留给按站点的规则。

性能附加好处

即便广告仍会下载,用 CSS 隐藏它也能去掉布局工作量,并阻止抓眼球的动画重绘。在沉重的新闻网站上,页面会感觉更平静,滚动也更顺滑。

让配方跑起来

从下载 JustZix 页面安装,并将这些规则与我们的现成示例搭配使用。广告常常紧挨着遮住内容的粘性页头——用我们位于/zh/blog/remove-sticky-headers-that-cover-content 的指南修好它们。今天几个选择器,明天一个更安静的网络。