AdBlock 支持使用 `## + CSS selector` 的方式编写 Element Hiding Filter，本质上就是用 CSS Selector 定位 DOM 元素，然后由 AdBlock 将其隐藏。AdBlock 官方文档也明确说明，其自定义过滤规则兼容 Adblock Plus 的过滤语法。([helpcenter.getadblock.com][1])

针对你这个 SVG 元素：

```html
<rect width="72" height="32" rx="16" fill="#FF2442" style=""></rect>
```

我最推荐写成：

```text
##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

它的含义就是：

```css
rect
[width="72"]
[height="32"]
[rx="16"]
[fill="#FF2442"]
```

也就是寻找同时满足这 4 个条件的 `<rect>`：

* `width=72`
* `height=32`
* `rx=16`
* `fill=#FF2442`

然后将其隐藏。

AdBlock 的 `##` 后面允许直接使用标准 CSS Selector，这正是官方定义的 Element Hiding Filter 语法。([Adblock Plus Help Center][2])

### 更推荐限制在特定网站

如果这个元素只需要在某一个网站隐藏，**强烈建议加域名**，不要让规则作用于所有网页。

例如网站是：

```text
example.com
```

那么写：

```text
example.com##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

这样比：

```text
##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

安全得多。

因为后一条规则会在**所有网站**寻找满足这些条件的 SVG `<rect>`，理论上可能误伤其他网页。

---

### 如果你想匹配得更宽松

假设网站以后改变了圆角：

```html
rx="16"
```

或者高度发生变化，那么原规则就失效了。

如果 `#FF2442` 这个颜色本身比较有辨识度，可以简化成：

```text
example.com##rect[fill="#FF2442"]
```

或者：

```text
example.com##svg rect[fill="#FF2442"]
```

第二种明确表示：

> 在 `<svg>` 内寻找 `fill="#FF2442"` 的 `<rect>`。

我会更推荐这一版：

```text
example.com##svg rect[width="72"][height="32"][fill="#FF2442"]
```

保留几个关键属性，但不依赖 `rx` 和空的 `style`。

---

### 不建议加入 `style=""`

虽然你也可以写成：

```text
example.com##rect[width="72"][height="32"][rx="16"][fill="#FF2442"][style=""]
```

但我不推荐。

因为：

```html
style=""
```

很可能只是当前页面生成出来的临时状态。网站稍微修改代码，例如变成：

```html
style="opacity: 1;"
```

或者干脆取消 `style` 属性：

```html
<rect width="72" height="32" rx="16" fill="#FF2442"></rect>
```

你的规则就无法命中了。

所以：

```text
example.com##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

更加稳健。

---

### 一个非常重要的问题：你到底想隐藏 `<rect>`，还是整个按钮？

SVG 页面经常是这样的：

```html
<svg>
    <rect width="72" height="32" rx="16" fill="#FF2442"></rect>
    <text>登录</text>
</svg>
```

如果你只隐藏：

```text
##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

结果可能只是**红色圆角背景消失**，但：

```text
登录
```

文字仍然存在。

也就是说，AdBlock 只隐藏 `<rect>`：

```text
svg
├── rect    ← 被隐藏
└── text    ← 仍然显示
```

如果你的真正目标是隐藏**整个 SVG 按钮**，可以考虑匹配包含这个 `<rect>` 的 `<svg>`：

```text
example.com##svg:has(rect[width="72"][height="32"][rx="16"][fill="#FF2442"])
```

例如：

```html
<svg>
    <rect width="72" height="32" rx="16" fill="#FF2442"></rect>
    <text>按钮</text>
</svg>
```

这条规则会隐藏整个：

```html
<svg>...</svg>
```

而不仅仅是红色 `<rect>`。

如果实际 DOM 是：

```html
<svg>
    <g>
        <rect width="72" height="32" rx="16" fill="#FF2442"></rect>
        <text>按钮</text>
    </g>
</svg>
```

那么甚至可以针对 `<g>`：

```text
example.com##g:has(rect[width="72"][height="32"][rx="16"][fill="#FF2442"])
```

这样隐藏整个按钮组，却不会误伤同一个 SVG 中的其他图形。

### 在 Chrome AdBlock 中添加

AdBlock 官方当前给出的操作方式是：

**AdBlock 图标 → 齿轮 → Customize → Manually edit your filters → Edit**

加入规则，比如：

```text
example.com##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

点击 **Save**，然后刷新网页。([helpcenter.getadblock.com][1])

如果只是隐藏你贴出来的这个 `<rect>`，那么直接使用：

```text
##rect[width="72"][height="32"][rx="16"][fill="#FF2442"]
```

即可。

如果你把这个 `<rect>` **外层完整的 `<svg>...</svg>` 或者父级 DOM 结构**再贴给我，我可以进一步给你写一条**只命中这个按钮、几乎不会误伤其他 SVG 元素**的 AdBlock rule。

[1]: https://helpcenter.getadblock.com/adblock-help-center/how-to-use-custom-filters?utm_source=chatgpt.com "How to use custom filters | AdBlock Help Center"
[2]: https://help.adblockplus.org/adblock-plus-help-center/how-to-write-filters?utm_source=chatgpt.com "How to write filters | Adblock Plus Help Center"


AdBlock 支持使用 ## + CSS selector 的方式编写 Element Hiding Filter，本质上就是用 CSS Selector 定位 DOM 元素，然后由 AdBlock 将其隐藏。AdBlock 官方文档也明确说明，其自定义过滤规则兼容 Adblock Plus 的过滤语法。(helpcenter.getadblock.com)

如何阻止微信公众号网页版背景图片的加载？

紫薇堂堂主

前端

开发工具

网络与通信

AdBlock支持CSS选择器隐藏SVG元素，推荐使用`example.com##svg:has(rect[fill="#FF2442"])`精准匹配整个按钮，避免误伤其他网页元素。

代码解释

热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

如何阻止微信公众号网页版背景图片的加载？-腾讯云开发者社区-腾讯云

如何阻止微信公众号网页版背景图片的加载？

如何阻止微信公众号网页版背景图片的加载？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐