如何用 CSS 隐藏 Cookie 墙和同意弹窗
Cookie 横幅是你在 2026 年访问几乎任何网站都要交的"税"。它们遮住内容、阻止滚动,还要你先点一下才能读到一个字。有了 JustZix,你可以在自己选定的每个网站上让它们自动消失。
为什么一条 CSS 规则胜过点击"全部拒绝"
点穿同意对话框既重复又慢,而且很多对话框把"拒绝"按钮藏在额外的菜单后面。JustZix 规则在页面加载的那一刻就运行,所以横幅根本没机会打断你。你为每个网站设置一次(或者用一个宽泛的 URL 模式设置一次)然后就可以忘掉它。
诀窍在于:大多数横幅只是带有可预测类名的普通 DOM 元素。隐藏元素、恢复滚动,页面就会表现得像横幅从未存在过。
配方 1:隐藏横幅并恢复滚动
大多数同意库通过给 <body> 或 <html> 元素添加 overflow: hidden 来锁定页面。仅隐藏横幅还不够——你还得解锁滚动。
/* 通用 Cookie 横幅清理 */
[id*="cookie"], [class*="cookie-banner"],
[class*="consent"], [id*="consent"],
[aria-label*="cookie" i] {
display: none !important;
}
/* 恢复横幅锁定的滚动 */
html, body {
overflow: auto !important;
position: static !important;
}[aria-label*="cookie" i] 里的 i 标志让匹配不区分大小写,所以它能同时捕获 "Cookie"、"COOKIE" 和 "cookie"。
配方 2:移除暗色背景遮罩
有些网站用一个固定的全屏遮罩把对话框背后的整个页面变暗。即便你隐藏了对话框,那层灰色仍可能停留并吞掉你的点击。
/* 移除变暗的背景遮罩 */
.modal-backdrop, .overlay, .cookie-overlay,
[class*="backdrop"], [class*="scrim"] {
display: none !important;
pointer-events: none !important;
}配方 3:对付顽固横幅的 JS 兜底方案
少数同意工具会在 CSS 加载后重建横幅,或者把它渲染在 CSS 无法触及的 shadow DOM 里。对于这些情况,一小段 JavaScript 规则就能搞定。JustZix 会在你指定的页面上运行它。
// 移除延迟渲染的同意节点
const KILL = ['cookie', 'consent', 'gdpr', 'privacy-banner'];
function sweep() {
document.querySelectorAll('div, section, aside').forEach(el => {
const id = (el.id + ' ' + el.className).toLowerCase();
if (KILL.some(k => id.includes(k)) && el.offsetHeight < 600) {
el.remove();
}
});
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
}
sweep();
new MutationObserver(sweep).observe(document.body, {
childList: true, subtree: true
});offsetHeight < 600 这个守卫是一道安全网:它能防止脚本删掉一篇恰好在类名里提到 "privacy" 的真正文章。
定位正确的 URL
如果你想在任何地方都生效,使用通配模式,例如 *://*/*。如果某个特定网站出了问题,就把规则收窄到那个域名。JustZix 允许你同时保留一条全局清理规则和按站点的覆盖规则,而更具体的规则获胜。
- 全局:为上面的通用 CSS 使用
*://*/*。 - 按站点:为调整过的选择器使用
https://news.example.com/*。
什么时候该停止隐藏、改为点击
用 CSS 隐藏横幅并不会向网站发送同意选择。对大多数阅读场景来说这没问题——没有横幅,没有追踪对话框。但如果某个网站确实在你回应之前拒绝运作,那就点一次"全部拒绝",然后让 JustZix 在后续访问中隐藏横幅。
开始上手
从下载 JustZix 页面获取扩展,然后浏览我们的现成示例,获取更多清理代码片段。横幅消失后,下一个烦恼通常是弹窗——参见我们关于干掉新闻订阅和注册弹窗的指南。
五分钟的设置换来一个永久更干净的网络。保存你的规则、把它们导出为备份,享受直接加载到正文的页面。
为这篇文章评分
暂无评分 — 成为第一个。