← 全部文章

教程

在 LinkedIn / Facebook / Twitter / X 上隐藏赞助帖 —— CSS + MutationObserver

15 5月 2026 · 作者 JustZix Team

社交媒体信息流约 30% 是混在自然内容里的赞助帖。赞助帖被设计成看起来不像广告 —— 随机哈希类名、动态 DOM。标准广告拦截器按 URL 模式（DoubleClick、Adsense）拦截它们，而不是按信息流布局。这正是 JustZix 结合 CSS + JS 大放异彩的地方。

LinkedIn（linkedin.com）

LinkedIn 的 DOM 混淆得最厉害。像 .feed-shared-update-v2--ad 这样的类名是稳定的，但每次改版都会变。文本匹配更可靠：

/* CSS 尝试 —— 能抓住一些 */
[data-ad-banner], .feed-shared-update-v2--promoted,
.feed-shared-actor__sub-description:has-text("Promoted") {
  display: none !important;
}

CSS :has-text() 不是标准的 —— 它是 JustZix 独有的伪类。通过 MutationObserver JS 兜底：

// JS 规则 —— 在信息流卡片里文本匹配 "Promoted"
const hideSponsored = () => {
  document.querySelectorAll('.feed-shared-update-v2, [data-id*="urn:li:activity"]').forEach(card => {
    if (card.dataset.jzChecked) return;
    card.dataset.jzChecked = '1';
    const text = card.textContent;
    if (/^Promoted|Sponsored/m.test(text) ||
        /\bPromoted\b/.test(card.querySelector('.feed-shared-actor__sub-description')?.textContent || '')) {
      card.style.display = 'none';
      JUSTZIX.log(`[LinkedIn] 已隐藏赞助卡片`);
    }
  });
};
new MutationObserver(hideSponsored).observe(document.body, {childList: true, subtree: true});
hideSponsored();

Facebook（facebook.com）

FB 有基于 ARIA 的标记 —— 比类名更稳定：

/* 带 "Sponsored" 标签的帖子 —— Facebook 用 aria 属性 */
div[aria-label="Sponsored"],
div:has(> * > span[aria-label="Sponsored"]),
[data-pagelet*="Sponsored"] {
  display: none !important;
}
/* 带 "Suggested for you" 的侧栏 */
[aria-label="Suggested for you"], [aria-label="Reels and short videos"] {
  display: none !important;
}

JS 增强 —— 在滚动时清理信息流，因为无限滚动会加载新帖子：

// JS 规则
new MutationObserver(() => {
  document.querySelectorAll('div[role="feed"] > div').forEach(post => {
    if (post.dataset.jzChecked) return;
    post.dataset.jzChecked = '1';
    if (post.querySelector('[aria-label="Sponsored"]')) {
      post.style.display = 'none';
      JUSTZIX.log('[FB] 已隐藏赞助内容');
    }
  });
}).observe(document.body, {childList: true, subtree: true});

Twitter / X（twitter.com / x.com）

X 有一个「Promoted」标签，是 SVG 图标 + 文本。Twitter 还有「建议」/「为你推荐的趋势」侧栏：

/* 赞助推文 */
article:has([data-testid="promotedIndicator"]),
article:has(svg[data-testid="ad"]) {
  display: none !important;
}
/* 趋势侧栏 + 关注谁 */
[aria-label="Timeline: Trending now"],
[data-testid="sidebarColumn"] [data-testid="UserCell"] {
  display: none !important;
}

使用场景 1 —— TOGGLE3「反广告保护级别」

按平台的 3 级严格度：

// TOGGLE3 动作「🛡️ 保护」
states[0] = { label: 'Off',     value: 'off' }    // 不过滤
states[1] = { label: 'Normal',  value: 'normal' } // 隐藏赞助
states[2] = { label: 'Strict',  value: 'strict' } // 隐藏赞助 + 建议 + 趋势

code: |
  document.documentElement.dataset.jzProtection = value;
  JUSTZIX.log(`保护: ${value}`);

CSS 规则使用 data 属性：

html[data-jz-protection="off"] .jz-hide-sponsored { display: block !important; }
html[data-jz-protection="strict"] [aria-label*="Suggested"] { display: none !important; }

使用场景 2 —— Output Console 统计被隐藏的元素

// 在一条 JS 规则里：
let hiddenCount = 0;
window.JZ_HIDDEN_SPONSORED = () => {
  JUSTZIX.log(`[${location.hostname}] 已隐藏赞助数量: ${hiddenCount}`);
};
// 在每个 .style.display = 'none' 时递增：hiddenCount++;
// 从 JS Console 调用：JZ_HIDDEN_SPONSORED()

坑

• 选择器会变。社交平台经常重组 DOM 以增加拦截难度。每月测试规则。
• 文本匹配对 i18n 很脆弱。「Promoted」/「Sponsored」/「赞助」/「推广」—— 不同语言。加一个正则或运算。
• MutationObserver 在大信息流上很贵。如果 FPS 下降，节流 observer（debounce setTimeout 200 毫秒）。
• :has-text() 不是标准 CSS。JustZix 支持它。在原生 CSS 里用 :has(div:contains(...))（也不是标准的）或一个 JS observer。

接下来做什么

• 隐藏 cookie 横幅 —— 孪生模式
• 自定义 AI 聊天应用 —— CSS + JS observer 模式
• TOGGLE3 —— 三态保护选择器

安装 JustZix，把信息流里 30% 的份额夺回来给自然内容。