元素隐藏选择器 `##`：用 CSS 把页面上的某块藏起来

语法结构

域名##CSS选择器

左边是域名（可以写多个用逗号分隔，也可以用 ~ 取反排除），右边是标准 CSS 选择器。中间用 ## 分隔。

例子

隐藏某网站上所有 class 是 ad 的 div

example.com##div.ad

隐藏某网站上所有带 data-ad 属性的元素

example.com##[data-ad]

同时隐藏多个网站上的相同元素

example.com,test.org##div.sidebar-ad

隐藏所有网站上的某个元素（不推荐，容易误伤）

##div.sponsor

域名省略 = 对所有网站生效，但几乎总该避免这样写。

怎么找到正确的选择器

步骤：

1. 在 Chrome 或 Firefox 里打开有广告的网站；
2. F12 打开开发者工具；
3. 点击左上角的选择元素工具（箭头图标）；
4. 在页面上点击广告元素；
5. 找到该元素在 DOM 里的标签、class、id；
6. 在开发者工具里右键该元素 → Copy → Copy selector（Chrome），直接拿到一个完整的 CSS 选择器。

Copy 出来的选择器可能是这样的：

#sidebar > div:nth-child(2) > div.ad-banner

把它接到 example.com## 后面就成了一条完整的元素隐藏规则。

选择器越精确越好

• 不要写 ##div（太宽，会隐藏全站所有 div）；
• 尽量用 class（.ad-banner）或 id（#sidebar-ad），这些是唯一的；
• 如果只有父级选择器够用，就不要写一长串嵌套；
• 用 :nth-child(n) 这种伪选择器要谨慎——网站改版后 n 会变，规则就失效了。

测试元素隐藏规则

在 ABP 设置面板的"自定义过滤规则"里写完规则后：

1. 保存；
2. 回到页面，硬刷新（Ctrl+Shift+R）；
3. 看元素是不是消失了；
4. 如果没消失，要么选择器不对，要么该元素是通过异步加载的（需要等一会儿才出现）。

元素隐藏例外

不想在某个网站上 hide 某个元素：

@example.com##div.ad-banner

注意这里是单个 @，不是 @@。它会让 example.com 上的这条元素隐藏规则失效。

元素隐藏规则的局限

• 如果广告是通过 Shadow DOM 加载的，选择器可能选不到；
• 如果广告内容是动态注入、结构频繁变化的，选择器会过时；
• 元素隐藏只是视觉上藏起来，元素本身还在 DOM 里，网络请求已经发生了——如果想彻底拦截还是得用地址规则。