在任何网站隐藏 cookie 横幅 —— 5 段开箱即用的代码
GDPR 本应让我们掌控 cookie，结果却让每两个网站里就有一个弹出遮住 30% 屏幕的弹窗。本文展示五种一劳永逸摆脱这堵墙的方法 —— 用 CSS、JavaScript 和 JustZix 扩展。
这合法吗？
合法。GDPR 与 ePrivacy 指令约束的是网站运营者（在设置 cookie 前必须征得同意）。而站在你这边 —— 作为用户 —— 你完全有权在自己的浏览器里修改网站的外观。就像任何广告拦截器或 Safari 的阅读模式一样。一个重要说明：隐藏横幅通常不等于同意 cookie —— 大多数网站在你明确点击「接受」之前，仍然只会设置严格必要的 cookie。
方法 1 —— 针对最常见类名的通用 CSS
最简单也最安全。能覆盖网上约 80% 的横幅：
/* Cookie 横幅 —— 最常见的类名和 ID */
.cookie-banner,
.cookie-notice,
.cookie-consent,
.gdpr-banner,
.consent-banner,
#cookie-notice,
#cookieConsent,
#onetrust-banner-sdk,
[class*="CookieConsent"],
[id*="cookie-bar"] {
display: none !important;
}
/* 很多横幅在你点击前会锁住 body 的滚动 */
html, body {
overflow: auto !important;
position: static !important;
}第二段非常关键 —— 许多横幅会在 <body> 上设置 overflow: hidden，在你接受前锁住滚动。强制 overflow: auto 可恢复正常行为。
方法 2 —— 激进的属性选择器
当网站使用动态类名（Tailwind、CSS-in-JS）而基础模式无法匹配时，改为针对属性下手：
/* 捕获类名 / ID 中含有 "cookie" 或 "consent" 的一切元素 */
[class*="cookie" i],
[id*="cookie" i],
[class*="consent" i],
[id*="consent" i],
[class*="gdpr" i],
[role="dialog"][aria-label*="cookie" i] {
display: none !important;
}属性选择器中的 i 标志（例如 [class*="cookie" i]）让匹配不区分大小写。若没有它，.CookieBanner 就无法匹配 "cookie"。
警告：这段代码可能误伤过多 —— 比如一篇讲 cookie（法律意义上的！）的文章也会被一起隐藏。请有的放矢地使用，最好放进一个限定特定域名的规则文件夹里。
方法 3 —— :has() 选择器（现代写法）
从 Chrome 105 和 Safari 15.4 起，你可以使用 :has() —— 一种针对包含某个匹配子元素的元素的选择器。它非常适合 cookie 横幅，因为横幅内部总会有一个「接受」按钮：
/* 实用版本 —— 针对带有 Accept 按钮的 fixed/sticky 容器 */
div:has(> button[aria-label*="Accept" i]),
div:has(> button[aria-label*="cookie" i]),
aside:has(> button[aria-label*="consent" i]) {
display: none !important;
}CSS 不支持 :contains()（那是 jQuery 的发明）。我们改为针对 aria-label 属性 —— 设计良好的横幅为了屏幕阅读器本来就会带上它。
方法 4 —— 用 JavaScript 自动点击「接受」
当 CSS 不够用时（横幅藏在 Shadow DOM、整页锁定），让 JS 替你点击。比你反应过来还快：
// 自动点击 "接受" 按钮 —— 在 iframe 中同样有效
let attempts = 0;
const interval = setInterval(() => {
if (++attempts > 20) return clearInterval(interval);
const candidates = [
...document.querySelectorAll('button, a[role="button"], input[type="button"]')
];
const target = candidates.find(el => {
const text = (el.textContent || el.value || '').trim().toLowerCase();
const aria = (el.getAttribute('aria-label') || '').toLowerCase();
return /^(accept all|accept|agree|allow all|i accept|ok)$/i
.test(text) || /accept|agree|consent/.test(aria);
});
if (target) {
target.click();
clearInterval(interval);
}
}, 500);它每 500 毫秒探测一次，持续 10 秒（20 次 × 500 毫秒）。找到第一个匹配的按钮 —— 点击并停止。实际效果是：你甚至看不到横幅。
伦理提示：点击「接受」意味着你同意了营销 cookie。如果这让你不舒服 —— 请用方法 1+2（只隐藏、不接受）。这样网站会把你当作一个单纯没有作出回应的匿名用户。
方法 5 —— Shadow DOM（极端情况）
OneTrust、Cookiebot、Usercentrics —— 最常见的 cookie 横幅 SaaS —— 经常把它们的 UI 渲染在 Shadow DOM 里。shadow root 之外的 CSS 无法触及它。这就需要 JS：
// 按常见名称找到宿主元素，进入它的 shadowRoot
function hideShadowBanners() {
const hosts = document.querySelectorAll(
'#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
);
hosts.forEach(host => {
host.style.display = 'none';
// 再加上 shadow 内容（如果它使用了 shadow DOM）
if (host.shadowRoot) {
const style = document.createElement('style');
style.textContent = ':host { display: none !important; }';
host.shadowRoot.appendChild(style);
}
});
}
// 首次执行 + 监听稍后插入的元素
hideShadowBanners();
new MutationObserver(hideShadowBanners)
.observe(document.body, { childList: true, subtree: true });MutationObserver 还能捕获那些在 DOMContentLoaded 之后才插入的横幅 —— 通常追踪脚本是异步加载的，横幅会在页面加载后 1-2 秒才出现。
如何在 JustZix 中接入
- 安装扩展（下载页面 —— ZIP，2 分钟）。
- 点击 JustZix 图标 → 「新建规则」。
- URL 匹配模式：
*（处处生效）或https://example.com/*（单个域名）。 - 在 CSS 标签页粘贴方法 1（通用版）—— 保持其启用。
- 如果遇到某个网站什么都没被隐藏 —— 把方法 4 作为一条 JS 规则添加，并限定到那个域名。
- 在多设备间同步你的密钥 —— 横幅会在笔记本、台式机和工作电脑上同时消失。
需要避开的坑
- 不要在
html或body上设置display: none—— 那会把整个页面藏起来。 - 页面加载可能会略微变慢 —— 探测 20 次的自动接受 JS 会占用事件循环。实际上几乎察觉不到。
- 有些付费墙会伪装成 cookie 横幅（例如大型新闻网站）—— 隐藏横幅并不会解锁内容。那里只有针对该站的专门规则才有用。
- 商店的横幅有时是法律要求的（例如结账时的同意）。在你打算购物的网站上别隐藏它。
接下来做什么
同样的思路也适用于其他破坏体验的元素：新闻邮件弹窗、「开启通知」、付费墙预览。在示例栏目里看看更多开箱即用的代码，或浏览 JustZix 的真实应用场景。
安装 JustZix 并写下你自己的规则。把本文第一段代码粘进扩展 = 横幅在 80% 的网站上消失。剩下的只是针对个别麻烦域名逐步打磨而已。
为这篇文章评分
暂无评分 — 成为第一个。